开始学习CSS的浮动和定位。
浮动
浮动最初是为了实现文字环绕图片效果，现在多用于页面布局。
元素浮动后的特点
1.脱离文档流
2.不管浮动前是什么元素，浮动后，默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高
3.不会独占一行，可以和其他元素共用一行
4.不会margin合并，也不会margin塌陷，能够完美设置四个方向的margin和padding
5.不会像行内块元素一样当成文本处理（即没有行内块的幽灵空白问题）
元素浮动后的影响以及解决方法
影响
1.对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟元素无影响。
2.对父元素的影响：不能撑起父元素的高度，导致父元素塌陷；但父元素的宽度依然束缚浮动的元素。
解决影响
首先，布局中有一个原则：设置浮动时，兄弟元素要么全部浮动，要么全部不浮动。
若遵循这个原则后，兄弟元素全部浮动，则不会出现后面不浮动的兄弟元素，占据浮动元素之前的位置的情况，则只需要解决撑不起父元素的高度的问题。
解决撑不起父元素的高度的问题的方法：
方法一：给父元素指定高度（写死父元素高度）
方法二：给父元素也设置浮动，即父子元素全部浮动起来。（但是会使得父亲的兄弟环绕上来）
方法三：给父元素设置overflow:hidden
方法四：在所有浮动元素的后面，添加一个块级元素，并给该块级元素设置clear:both
方案五：给浮动元素的父元素（必须得父元素，不能找祖先元素），设置伪元素（元素选择器那里有学伪元素），通过伪元素清除浮动，原理和方法四同【推荐】
写法：
.outer::after{
content: "";
display: block;
clear: both;
}定位
相对定位
/* 开启相对定位 */
position: relative;
/* 相对可选值有left、right、top和bottom */
left: 10px;相对定位的参考点是相对自己原来的位置。
特点：
1.不会脱离文档流，可以用于相对元素进行轻微调整的情况。
2.定位元素显示的层级比普通元素高。即，定位的元素会盖在普通元素上；若两个元素都写了定位，后写的元素会盖在先写的元素之上。
3.left和right不能同时设置；top和bottom不能同时设置。
4.相对定位一般不和margin、浮动相搭配。一般和绝对定位相搭配。
绝对定位
/* 开启相对定位 */
position: absolute;
/* 绝对可选值有left、right、top和bottom */
left: 10px;绝对定位的参考点是包含块的位置。
包含块定义：
1.对于没有脱离文档流的元素，包含块就是其父元素。
2.对于脱离文档流的元素（浮动的元素、绝对定位的元素），包含块是第一个拥有定位属性（包括绝对定位和相对定位）的祖先元素（如果所有祖先元素都没有定位，那包含块就是整个页面）。
特点：
1.脱离文档流，会对后面的兄弟元素，父元素有影响（和浮动类似）
2.left和right不能同时设置；top和bottom不能同时设置。
3.绝对定位、浮动不能同时设置，若同时设置，浮动失效，以定位为主。
4.绝对定位能和margin一起使用但不推荐。
5.无论是什么元素设置了绝对定位，都会变成定位元素。（定位元素特点：默认宽、高被内容撑开，且能自由设置宽高）
浮动and绝对定位and相对定位
1.一般页面的整体用浮动去布局，一些细微需要调整的地方用绝对定位（例如：实现鼠标浮动到某个地方会弹出不同内容的功能，就是首先用绝对定位将内容2覆盖到内容1上，鼠标浮动到这个地方后，利用伪类选择器改变元素2的绝对定位，使得元素1能够显现出来）
<style>
.outer {
width: 500px;
background-color: #555;
border: 1px solid black;
padding: 20px;
position: relative;
}
.box {
width: 200px;
height: 200px;
font-size: 20px;
}
.box1 {
background-color: blueviolet;
}
.box2 {
background-color: green;
position: absolute;
top: 220px;
left: 20px;
/* 使得过渡更加优雅 */
transition: 1s all linear;
}
.box3 {
background-color: red;
}
.outer:hover {
.box2 {
position: absolute;
top: 220px;
left: 220px;
}
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>2.绝对定位和浮动的区别是：若要实现a覆盖b，绝对定位能完全覆盖，但是浮动只能覆盖b的div盒子，若b内有文字，文字覆盖不了。
3.一般设置绝对定位遵循：父相子绝（父亲设置相对定位变成包含块，儿子设置绝对定位，儿子的参考点就可以是父亲了）
固定定位
/* 开启相对定位 */
position: fixed;
/* 固定可选值有left、right、top和bottom */
left: 10px;固定定位的参考点是视口（对于PC浏览器来说，视口就是我们看网页的那扇“窗口”）。【类似于有些网页的小广告，无论页面如何滚动他都在网页的右下方，因为它的参考点是视口而言】
特点（与绝对定位的特点同）：
1.脱离文档流，会对后面的兄弟元素，父元素有影响。
2.left和right不能同时设置；top和bottom不能同时设置。
3.固定定位和浮动不能同时设置，若同时设置，浮动失效，以固定定位为主。
4.固定定位能和margin一起使用但不推荐。
5.无论是什么元素设置了固定定位，都会变成定位元素。（定位元素特点：默认宽、高被内容撑开，且能自由设置宽高）
粘性定位
/* 开启相对定位 */
position: sticky;
/* 粘性可选值有left、right、top和bottom */
top: 0px;参考点是离他最近的一个拥有“滚动机制”的祖先元素。
特定：
1.不脱离文档流，是一种专门用于窗口滚动时的新的定位方式。
2.最常用的时top:0px;
3.相对定位一般不和margin、浮动相搭配。
定位的层级
1.定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2.如果位置发生重叠，默认情况是：后写的元素压在先写的元素上面。
3.可以通过CSS的z-index调整元素的显示层级。z-index的值是纯数字，数字越大层级越高，但只有是定位的元素z-index才生效。（特例：如果z-index值大的元素被z-index值小的元素压着，有可能是包含块的元素z-index值设置得太小）。
扫一扫
1143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
