边界重叠是指两个或多个盒子(父子或者兄弟之间)的相邻边界重合在一起而形成一个单一边界。
不会发生重叠的情况:
1 水平边距不会发生重叠;
2 相邻的盒模型中,如果其中一个是float,垂直margin不会重叠,并且浮动的盒模型和它的子元素之间也一样;
3 设置overflow 属性的元素和它的子元素之间不会重叠,(overflow:visible除外);
4 设置绝对定位的盒模型(相邻or父子);
5 设置display:inline-block的元素(相邻or父子);
重叠margin值的计算方法:
1 全部为+,取最大值;
2 全部为-,取绝对值,然后用0-最大值;
3 不全是正值,取绝对值,用正值-最大值;
外边距重叠的意义:
外边距的重叠只产生在普通流文档的上下外边距之间。外边距重叠,盒子之间就不会产生双倍的距离。
防止外边距重叠的解决方法:
1 外层元素psdding代替;
2 内层元素透明边框border:1px solid transparent;
3 内层元素绝对定位position:absolute;
4 外层元素overflow:hidden;
5 内层元素float:left; display:inline-block;
6 内层元素 padding:1px;
eg: