一、定位
1.什么是定位
定位指的是将元素盒子（div,p,span,em...）摆放在浏览器中我们想要的位置上，
以此来对整个内容进行排列布局，实现我们想要的结果。定位是一个强有力的手段，
定位的常见方式有relative、absolute、fixed、static、sticky.
2.定位的方式
1.static
默认值,设置坐标无效,相当于没设置，top、right、bottom、left属性和z-index属性不生效。
2.relative
相对定位，在元素块设置此样式，及该元素的位置以自身为参考，给top,right,bottom,left属性
以自身为标准移动。
特征：
1.占据文档流，占位置
2:参考自身，加载在页面中的位置
以下图为例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0px;padding: 0px;}
.box{
width: 400px;
height: 400px;
background: pink;
margin: 30px;
}
.txt{
height:50px;
width: 50px;
background:red ;
position: relative;
left: 200px;
top:50px;
}
</style>
</head>
<body>
<div class="box">
<p class="txt"></p>
</div>
</body>
</html>
其运行效果如图：(默认是初始位置，及父级元素的左上角)
3.absolute
绝对定位，即相对于父级元素来定位，以父级元素位置为参考，设置子级元素相对于父级元素的位置。
特征:
1.脱离文档流，不占位置
2. 默认参考浏览器零点
3.如果有父级且父级有定位，那就参考父级元素
(默认定位除外)相当于给子元素制定了参考物
以下图为例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0px;padding: 0px;}
.box{
width: 400px;
height: 400px;
background: pink;
margin: 30px;
}
.txt{
height:200px;
width: 200px;
background:red ;
position: relative;
left: 50px;
top:50px;
}
.con{
height: 25px;
width: 25px;
background: gold;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="txt">
<div class="con">
</div>
</p>
</div>
</body>
</html>
效果如下：
4.sticky
粘性定位，当向下滑动时该元素会自动吸附在距离浏览器上边缘特点距离的位置，保持显示，不会隐藏。
其中既包含相对布局，又包含固定布局。
特征：
1.页面到达一定高度时，脱离文档流，浏览器吸附在顶部
2.结合了fixed和relative
3.顾开始占据文档流，吸附后脱离文档流
以下图为例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0px;padding: 0px;}
.box{
width: 600px;
height: 200px;
background: red;
}
.box1{
height:100px;
width: 800px;
background:pink ;
position:sticky;
right: 200px;
top: 0px;
}
.txt{
height:200px;
background:skyblue;
}
</style>
</head>
<body style="height: 10000px;">
<div class="box"></div>
<div class="box1"></div>
<p class="txt"> </p>
</body>
</html>
其效果如下：
初始状态：
向下滑动之后：
可以看出红色块吸附在浏览器上边缘，不会隐藏。
5.fixed
固定定位，即以浏览器的左上角为参考点进行位置布局，不受任何元素块的影响，其位置永久固定。
特征：
1.脱离文档流，不占位
2.元素会固定在页面中，不随着滚动而滚动(和粘性定位有相似之处)
以下图为例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin:0px;padding: 0px;}
.box{
width: 40px;
height: 40px;
background: pink;
position: fixed;
top: 120px;
right: 600px;
}
.txt{
height:100px;
background:red ;
}
</style>
</head>
<body style="height: 10000px;">
<div class="box"></div>
<p class="txt"></p>
</body>
</html>
滑动浏览器之后：任然保持位置固定不变。
二.浮动
1.什么是浮动
我们知道，元素在正常情况下是要占据位置的，特别又有块级元素与内联元素之分，在块级元素中，
每个元素要占据一整行的位置，这时若我们想要将几个块级元素在一行排列显示，
（除了转换display:inline之外），这时就要求我们要为这些块级元素添加浮动，也就是触发BFC区域，
才能实现效果。
简而言之，浮动就是将该元素漂浮于空中，处于游离状态，但依然占据文档位置，只是不会占据
一整行空间，这时块级元素就能在一排显示排列。
2.怎样设置浮动
浮动分为左浮动(float:left)，右浮动(float:right),不浮动(none)。
浮动效果：
1:左浮动找左边，有浮动找右边
2：浮动只影响后面的元素，不影响前面的元素
3：父级元素的宽度必须要容纳下浮动元素的宽度之和，否则将被迫换行
4：子元素高度不一致，被迫换行
5：先写的先浮动，后写的后浮动
6：图文混排
浮动之后就不单独占据一行，只占据内容位置相当于两层楼，浮动之后就到第二层了，下面自动补齐。
（意思就是 一楼的元素继续可以被后面元素补齐，多个元素设置float则会在二楼进行并排排序，超出换行）
**（也就是说float会脱离一楼的文档流，但又会在二楼占据文档流）**
以下为例：
.box{
width: 600px;
height: 500px;
border: 4px solid red;
}
.box1{
width: 100px;
height: 150px;
background: pink;
float: left;
}
.box2{
width: 150px;
height: 200px;
background: skyblue;
float: left;
}
.box3{
width: 200px;
height: 250px;
background: greenyellow;
float: left;
*-----------------------------------------*
<div class="box">
<div class="box1">
</div>
<div class="box2">
</div>
<div class="box3">
</div>
</div>
效果如下：（三个元素块可横排排列）
3.浮动带来的bug
当未给父级元素设置高度时，给子元素添加浮动会出现以下bug：
1.父级元素不给高度，子元素浮动会造成父元素高度塌陷。
2.父元素的高度是由子元素撑开的，且子元素设置了浮动，父元素没有设置浮动。
3.子元素脱离了标准的文档流，那么父元素的高度会将其忽略，如果不清除浮动。
父元素会出现高度不够，那样如果设置border或者background都得不到正确的解析。
如下：
.box{
width: 800px;
/*overflow: hidden;*/
background: skyblue;
border: 3px solid red;
}
.box1{
width: 200px;
height: 150px;
background: gold;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: brown;
float: left;
}
.box3{
width: 200px;
height: 250px;
background: yellow;
float: left;
}
*-------------------------------------------*
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
效果如下：(边框加载失败)
解决办法：
1：给父元素添加高度
缺点：不灵活
2：给父级元素添加overflow：hidden(触发了一个BFC区域)
缺点：定位出去的元素将会被隐藏
3：给浮动元素的最后面加一个空标签（块级元素）
样式：
width:0
height:0
clear:left/right/both
缺点：代码冗余
4.万能清除法（给父级元素添加）
name:after{
content:"";
display:block
width:0
height:0
clear:both
overflow:hidden
visiblity:hidden
}
.box{
width: 800px;
/*overflow: hidden;*/
background: skyblue;
border: 3px solid red;
}
.box1{
width: 200px;
height: 150px;
background: gold;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: brown;
float: left;
}
.box3{
width: 200px;
height: 250px;
background: yellow;
float: left;
}
.box4{
height: 0px;
width: 0px;
clear: left;
}
.box:after{
content: "";
display: block;
width: 0;
height: 0;
clear: both;
overflow: hidden;
visibility: hidden;
}
效果如下（解决父级元素塌陷问题）
总结
掌握定位与浮动之后，可以清晰的布置页面布局和处理出现的bug。实现元素的精准定位。
学好前端第一步，先把布局搞清楚！
NZ 雷鸣霄
2020.03.22
1446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
