什么是外边距重叠，重叠的结果是什么

什么是外边距重叠，重叠的结果是什么

小课堂【成都第142期】   分享人：张珺琢

什么是外边距重叠_腾讯视频

1.背景介绍

外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界重合在一起而形成一个单一边界,外边距的重叠只产生在普通流的垂直相邻边界间。

如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。

2.知识剖析

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加

一般情况：

3.常见问题

外边距重叠的意义？

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。

解决外边距重叠？

4.解决方案

外层元素padding代替

内层元素透明边框 border:1px solid transparent;

内层元素绝对定位 postion:absolute:

外层元素 overflow:hidden;

内层元素 加float:left;或display:inline-block;

内层元素padding:1px;

5.编码实战

对黄色盒子设置overflow：hidden；或者对橙色盒子设置绝对定位。或设置浮动，等等。很多种方法。

6.拓展思考

利用BFC是否能避免垂直方向margin重叠？

BFC的两条属性：

1内部的Box会在垂直方向，一个接一个地放置。

2Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

由此：

当垂直的两个box属于不同BFC时，可以避免重叠。

感谢收看。

http://www.jnshu.com/login/1/31050617

------------------------------------------------------------------------------------------------------------------------

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！