1. 浮动
-
浮动可以让多个盒子在同一行显示,浮动在网页中布局的使用步骤
- 利用标准流让父盒子在上下位置排列
- 使用浮动让父盒子内的子盒子左右位置排列
- 若浮动的盒子影响了后面标准流盒子的布局,则需要清除浮动
-
浮动的盒子只会影响后续标准流盒子的布局,不会影响到之前标准流和子的布局
-
若一个盒子设置了浮动,理论上其兄弟盒子都需要设置浮动,且浮动可以让一行内的多个兄弟盒子没有缝隙的排列
-
浮动的元素会脱离标准流,导致父盒子的高度为0,在父盒子不方便给高度的情况下会影响到后续标准流盒子的布局,所以设置了浮动的盒子,一般都需要清除浮动
-
清除浮动采用闭合元素的策略,通过
clear: both;
清除浮动,有四种清除浮动的方法-
添加额外标签(W3C推荐),给这个元素设置样式
clear: both;
注意:这个额外的元素必须是块级元素,这种方式最大的缺点就是会影响html的结构 -
给父元素设置样式
overflow: hidden;
这种方式简单,但是会隐藏掉超出盒子部分的内容,慎用 -
给父元素添加
::after
伪元素,优点:不会改变html的结构
.father:after { content: ""; display: block; height: 0;/*在content为空的情况下,删除这一行效果一样,我认为设置高度是为了防止意外在conten中添加了内容,影响到布局*/ clear: both; visibility: hidden; } .father { zoom: 1; /*兼容IE6、7*/ }
- 给父元素添加双伪元素
::bofore
::after
,优点:不会改变html的结构,写法更简单
.father::before, .father::after { content: ""; display: table; } .father::after { clear: both; } .father { zoom: 1; /*兼容IE6、7*/ }
-
2. 定位
- 页面中多个盒子存在层级关系就可以使用定位,定位 = 定位模式 + 边偏移
- 定位的5种模式
定位模式 | 静态定位static | 相对定位relative | 绝对定位absolute | 固定定位fixed | 粘性定位sticky |
---|---|---|---|---|---|
参考目标 | 标准流 | 自身原来的位置 | 离自身最近的第一个具有定位的祖先元素(不含static) | 浏览器的可视窗口 | 浏览器的可视窗口 |
是否脱标 | 不脱标 | 不脱标 | 脱标 | 脱标 | 不脱标 |
特点 | 就是标准流 | 不会影响后面的标注流盒子 | 如果祖先元素都无定位则相对于浏览器可视窗口定位 | 定位与父元素无关;不随滚动条滚动;可以看做特殊的绝对定位 | 必须设置任意一个边偏移值才能生效 |
- 定位的叠放次序z-index(z-index没有单位,且只有设置了定位的元素才可以设置z-index)
- z-index的值越大,层级越高,越靠上层显示
- z-index的值相同,书写顺序越靠后,越显示在上层
3. 比较元素的浮动和定位
- 行内元素添加绝对/固定定位、浮动可以直接设置盒子的宽度和高度,块级元素添加绝对/固定定位、浮动如果不设置宽度和高度,盒子的大小默认为内容的大小
- 浮动的元素只会压住盒子,但是不会压住盒子内的文字和图片(浮动原本的功能就是用来制作文字环绕效果的)
- 绝对定位会压住盒子里的所有内容,包括文字和图片
4. 外边距塌陷
- 外边距塌陷有两种情况
-
嵌套关系的两个盒子,子盒子设置了
margin-top
,则父盒子也会被往下移动一段距离 -
相邻两个兄弟盒子,第一个盒子设置了
margin-bottom
,第二个盒子设置了margin-top
,则两个盒子在垂直方向上的距离并不是简单的两个外边距相加,两个盒子之间的距离为上边距和下边距中较大的值
出现父子盒子外边距塌陷的情况有六种解决方法,如下
描述 | |
---|---|
方法一 | 给父盒子添加上边框 |
方法二 | 给父盒子添加overflow: hidden/auto; |
方法三 | 将父盒子或子盒子设为行内块元素 |
方法四 | 将子盒子设为浮动(会影响之后盒子的布局) |
方法五 | 子盒子使用绝对定位(会影响之后盒子的布局) |
方法六 | 不要给子盒子设置上边距,改用给父盒子加上内边距 |
- 出现兄弟盒子外边距塌陷的情况有五种解决方案
描述 | |
---|---|
方法一 | 在可能出现外边距塌陷的位置,两个盒子不要同时设置外边距 |
方法二 | 将其中一个盒子设置为行内块元素 |
方法三 | 将排列在下面的盒子设置为浮动 |
方法四 | 将排列在下面的盒子设置为绝对定位或者固定定位 |
方法五 | 给其中一个盒子添加一个父盒子,然后给这个父盒子添加overflow: hidden/auto; |
- 行内元素为了照顾兼容性尽量只设置左右内边距,不要设置上下内边距,但是块级元素和行内块元素就可以设置上下左右的内边距
- 脱离标准流的盒子不会出现外边距塌陷(浮动、绝对定位、固定定位)