一、定位
所为定位，实际上就是定义元素框相对于其正常位置，应该出现在哪儿
定位就是改变元素在页面上的默认位置
分类：
普通流定位：（元素默认的定位方式）
浮动定位
相对定位
绝对定位
固定定位
1、普通流定位
文档流是页面元素默认的定位方式
块级：从上到下排列（独占一行）
行级：从左到右排列（不独占一行）
2.浮动定位
float：left
float：right
如果将元素的定位方式设置了浮动定位那么具有以下几个特点
1.浮动元素会脱离文档流，其他未浮动的元素要上前补位
2.浮动元素会停靠在父元素的左边或者右边，或者停靠在其他浮动元素的边缘上
3.浮动元素只会在当前行内浮动
4.浮动元素依然位于父级元素内
5.让多个块级元素处于一行
浮动引发的效果
当父元素的宽度显示不下所有已浮动的元素时，最后一个元素将换行（有可能会被卡住）
元素一旦浮动起来，那么将变成块级元素，尤其对行内元素影响最大。
文本、行内元素、行内块元素 采用文字环绕的方式排列，是不会被浮动元素压在底下的会巧妙的避开浮动元素
清除浮动
元素浮动起来之后，除了影响到自己的位置，还会影响后续元素
如果不想被前面浮动元素影响 可以使用清除浮动来解决这个问题
谁被影响 就在谁身上用
关键字 ： clear ：
left 清除左浮动
right 清除右浮动
both 不管是左右都清除
浮动元素对父级元素带来的影响
如果父级的高度设置100% 或者 没有设置（自适应） 当元素全部浮动起来之后 父级的高度为0
如何去解决：
1.直接给父级设置高度px
弊端：必须要知道父级准确的高度
2.设置父元素浮动
弊端：对后续元素又影响
3.为父级元素设置overflow（溢出）
弊端：如果子级内容有溢出显示的话会被一同隐藏
4.在父元素中追加一个空元素 设置清除浮动
CSS的伪类
hover：鼠标触碰到元素时触发的伪类
1.改变单独的元素
比如：我想要改变 li 标签做到鼠标触碰 li 时 字体会变色
li：hover{
color：blue
}
2.兄弟级，相同级的元素改变方式：
比如我想鼠标碰触到 .a1 时 改变 .a2 的显示：
.a1:hover(空格)+.a2{}
3.父子级：碰触父级元素改变子级元素：
比如在 .a1 标签里有一个span标签，鼠标触碰 .a1 引发span出现效果：
.a1:hover(空格)span{}
显示相关
1.显示方式
作用： 决定了元素在页面中如何摆放定位。
属性： display：none 让元素的分类变为空 从而不见
脱离了文档流
visibility 显示/隐藏元素
visible 可见的
hidden 隐藏的
collapse 使用在表格元素上 ，删除一行或者一列 不影响表格整体布局
区别：
dispaly 脱离了文档流
visibility 不脱离文档流导致空间依然占据
opacity： 改变元素的透明度
范围：0~1之间。
2、光标的属性
属性：cursor
default 默认的属性
pointer 手
crosshair +
text 文本
wait 加载等待
help 帮助
3.列表的属性
list-style：none（去掉项目符号）
list-style-image：url() 自定义项目符号替换成图片
list-style-position：列表项位置
二、position定位
1.static（默认值）
2.relative 相对定位
3.absolute 绝对定位
4.fixed 固定定位
图层概念：
z-index：调整元素的图层
注意 ：只有使用在 相对定位 绝对定位 固定定位上 浮动并不能使用
只能用在同级的标签上 不能用在父级和层级关系的标签中 子级永远是覆盖父级的
①相对定位
偏移属性 改变元素在页面上的位置（移动元素）
top
left
right
bottom
相对定位： 元素会相对原来的位置偏移到某个地方，原本的位置依然会保留 相对元素原来位置的左上角进行位置偏移的
使用场合： 元素位置的微调
②绝对定位
绝对定位的元素会脱离文档流 相对于body进行位置偏移
注意：一旦我们给元素设置了绝对定位之后就具有的漂浮的效果
③固定定位
固定定位： 一旦写上了固定定位之后，元素就具有漂浮的效果并脱离文档流 不受我们滚动条的影响
跟随body标签的左上角进行位置偏移的
④绝对定位和相对定位的结合使用
1.在要偏移的元素的父级元素里面添加 相对定位
2.在该元素里添加绝对定位
各种定位的使用场合
多个块级元素现在要在一行内显示 用浮动
元素要实现自身位置的微调的时候 用相对定位
实现弹出内容时（或者排版） 用绝对定位和相对定位的结合使用
顶部固定 左边导航固定 广告 固定定位
练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style type="text/css">
.f{
width: 300px;
height: 300px;
border:1px solid red ;
}
.s1,.s2,.s3{
width: 75px;
height: 75px;
}
.s1{
/*浮动关键字：
float
1.left
2.right*/
background-color: aqua;
float: left;
}
.s2{
background-color: deeppink;
float: left;
}
.s3{
background-color: greenyellow;
float: left;
}
.sp1{
/*行内元素浮动会变成块级元素*/
float: left;
width: 75px;
height: 75px;
color: white;
background-color: black;
}
.f1{
width: 600px;
height: 50px;
background-color: #000000;
color: white;
line-height: 50px;
}
.f1 ul{
width: 400px;
height: 50px;
margin: 0 auto;
}
.f1 ul li{
list-style: none;
float: left;
margin: 0 auto;
margin-left: 20px;
}
.f1 ul li:hover{
color: yellow;
}
/*display
显示方式：
1.display：none 元素分类为空 不可见 脱离文档流 后面的元素会向前补位*/
.div1{
width: 400px;
height: 400px;
background-color: #FF0000;
display: none;
}
/*visibility：显示/隐藏元素
1.visible：默认可见
2.hidden：隐藏
3.collapse：用在表格元素上，删除一行或者一列不影响表格整体布局*/
.div2{
width: 400px;
height: 400px;
background-color: black;
visibility: hidden;
}
.div3{
width: 400px;
height: 400px;
background-color: blue;
}
table{
width: 400px;
height: 400px;
visibility: collapse;
}
</style>
</head>
<body>
<div class="f">
<div class="s1"></div>
<div class="s2"></div>
<div class="s3"></div>
<span class="sp1">1111</span>
</div>
<div class="f1">
<div class="fs1">
<ul>
<li>lalala</li>
<li>lalalal</li>
<li>lalalala</li>
<li>sdsdsd</li>
<li>sdsdsds</li>
</ul>
</div>
</div>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<table border="" cellspacing="" cellpadding="">
<tr><th>Header</th></tr>
<tr><td>Data</td></tr>
<tr><td>Data</td></tr>
</table>
</body>
</html>
用浮动做出导航栏：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.f{
width: 100%;
height: 50px;
}
.f ul{
width: 1700px;
height: 50px;
margin: 0 auto;
}
.f ul li{
float: left;
list-style: none;
margin-left: 30px;
line-height: 50px;
}
.f ul li:hover{ color: #00FFFF;
border-bottom:1px solid #00FFFF ;}
</style>
</head>
<body>
<div class="f">
<ul>
<li>首页</li>
<li>剧集</li>
<li>电影</li>
<li>综艺</li>
<li>音乐</li>
<li>少儿</li>
<li>来疯</li>
<li>直播</li>
<li>片库</li>
<li>拍客</li>
<li>咨询</li>
<li>纪实</li>
<li>公益</li>
<li>体育</li>
<li>汽车</li>
<li>科技</li>
<li>财经</li>
<li>娱乐</li>
<li>原创</li>
<li>动漫</li>
<li>搞笑</li>
<li>旅游</li>
<li>时尚</li>
<li>亲子</li>
<li>教育</li>
<li>游戏</li>
<li>更多</li>
</ul>
</div>
</body>
</html>
相对定位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>相对定位</title>
<style type="text/css">
.father{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
.son1{
width: 100px;
height: 100px;
background-color: red;
/*相对定位*/
position: relative;
top: 100px;
left: 100px;
}
.son2{
width: 100px;
height: 100px;
background-color: yellow;
position: relative;
top: 100px;
left: 100px;
}
.son3{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>*
</body>
</html>
绝对定位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绝对定位</title>
<style type="text/css">
.father{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
z-index: 999;
/*position: relative;*/
}
.son1{
width: 100px;
height: 100px;
background-color: red;
/*绝对定位** /
*
*/
position: absolute;
/*top: 100px;
left: 100px;*/
z-index: 2;
}
.son2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
/*top: 100px;
left: 100px;*/
z-index: 3;
}
.son3{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
</div>*
</body>
</html>
固定定位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绝对定位</title>
<style type="text/css">
.father{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
}
.son1{
width: 100px;
height: 100px;
background-color: red;
}
.son2{
width: 100px;
height: 100px;
background-color: yellow;
/*固定定位*/
position: fixed;
top: 100px;
left: 100px;
}
.son3{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son1"></div>
<div class="son2"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
<div class="son3"></div>
</div>*
</body>
</html>
伪类的使用：英雄联盟点击图片显示文字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div-skin{
width: 400px;
height: 230px;
margin: 0 auto;
}
*{
margin: 0;
padding: 0;
}
ul li{
list-style: none;
float: left;
margin-left: 10px;
margin-top: 6px;
position: relative;
}
.li1,.li2{
margin-top: 0;
}
.li1,.li3,.li5{
margin-left: 0;
}
.mask{
display: inline-block;
width:195px;
height: 70px;
background-color: black;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height: 70px;
display: none;
}
ul li:hover .mask{
display: block;
color: gold;
}
.li1:hover +.li2{
display: none;
}
</style>
</head>
<body>
<div class="div-skin">
<ul>
<li class="li1">
<img src="img/skin02.jpg" alt="" />
<span class="mask">SKT</span>
</li>
<li class="li2"><img src="img/skin03.jpg" alt="" /><span class="mask">未来战士</span></li>
<li class="li3"><img src="img/skin04.jpg" alt="" /><span class="mask">神拳</span></li>
<li class="li4"><img src="img/skin05.jpg" alt="" /><span class="mask">敲钟牛</span></li>
<li class="li5"><img src="img/skin06.jpg" alt="" /><span class="mask">腥红之月</span></li>
<li class="li6"><img src="img/skin07.jpg" alt="" /><span class="mask">黎明与黑夜</span></li>
</ul>
</div>
</body>
</html>
来源：CSDN
作者：weixin_45060872
链接：https://blog.csdn.net/weixin_45060872/article/details/103533536