发表于： 2020-02-20 00:47:46
1 1382
1）背景介绍：
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界 (其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
初衷是为了使得排版更好看。
（2）知识剖析：
三种情况，相邻元素之间；父元素与子元素之间；空的块级元素。
条件：
特殊情况： 垂直方向上，根元素的盒子，不会发生坍塌。
水平方向上的外边距。
怎么使用？
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
（3）常见问题：
如何避免外边距重叠？
（4）解决方案：
使用BFC原理。BFC布局中的元素是不受外界影响的。
BFC布局规则：
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算
（5）编码实战：
（6）拓展思考：
返回列表
评论