L6.Margin collapse Summary 边界重叠

时间 2019-12-08

标签 l6.margin margin collapse summary 边界重叠栏目 CSS 繁體版

原文原文链接

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一块儿而造成一个单一边界。注意：相邻的盒模型可能由DOM元素动态产生并无相邻或继承关系。css

广泛计算法则：最终的边界宽度是相邻边界宽度中最大的值。若是出现负边界，则在最大的正边界中减去绝对值最大的负边界。若是没有正边界，则从零中减去绝对值最大的负边界。html

（注：为了方便测试，样式直接写在html里）web

collapsing具备传递性，A、B、C元素发生边界重叠，要一块儿计算，不能两两计算。算法

<div style="margin:50px 0; width:50px;">post

<div style="margin:-60px 0;">测试

<div style="margin:150px 0;">A</div>this

</div>spa

</div>.net

<div style="margin:-100px 0; width:50px;">设计

</div>

http://jsfiddle.net/smilingblueberry/P3e25/

正值：50px，150px，200px
负值：-60px，-100px，-120px
根据有正有负时的计算规则，正值的最大值为 200px，负值中绝对值最大的是-120px，因此，最终折叠后的margin应该是 200 + (-120) = 80px。

元素自身的margin-bottom和margin-top相邻时也会折叠

</div>

不会发生折叠的状况：

一、外边距的重叠只产生在普通流文档(in-flow，非浮动元素，非定位元素)的上下外边距之间，水平边距永远不会重合（Horizontal margins never collapse.-->CSS3貌似更改了这项规定）

三、相邻的盒模型中，若是其中的一个是浮动的（float），垂直margin不会重叠，而且浮动的盒模型和它的子元素之间也是这样。

</div>

建立了块级格式化内容的元素（4 5 6）
四、设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。

</div>
五、设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，而且和他们的子元素之间也是同样。

</div>
六、设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是同样。

</div>

</div>
七、若是一个盒模型的上下margin相邻，这时它的margin可能重叠覆盖（collapse through）它。在这种状况下，元素的位置（position）取决于它的相邻元素的margin是否重叠。
a、若是元素的margin和它的父元素的margin-top重叠在一块儿，盒模型border-top的边界定义和它的父元素相同。

在没有被分隔开的状况下，一个元素margin-top会和它普通流中的第一个子元素(非浮动元素等)的margin-top相邻；只有在一个元素的height是”auto”的状况下，它的margin-bottom才会和它普通流中的最后一个子元素(非浮动元素等)的margin-bottom相邻。

Exp

</div>

若是一个元素的height特性的值不是 auto，那么它的margin-bottom和它的子元素的margin-bottom不算是相邻，所以，不会发生折叠。
margin-top 没有此限制，因此是 100px，margin-bottom 没有折叠，因此只有 50px。

b、另外，任意元素的父元素不参与margin的重叠，或者说只有父元素的margin-bottom是参与计算的。若是元素的border-top非零，那么元素的border-top边界位置和原来同样。
一个应用了清除操做的元素的margin-top毫不会和它的块级父元素的margin-bottom重叠。
注意，那些已经被重叠覆盖的元素的位置对其余已经重叠的元素的位置没有任何影响；只有在对这些元素的子元素定位时，border-top边界位置才是必需的。
八、根元素的垂直margin不会被重叠。

CSS3中与上述不一致的规定（左右margin能够折叠了？）

The left margin of a box A collapses with the left margin of its parent box B if the margins are adjoining and B is ‘rl’ or ‘lr’.
The right margin of a box A collapses with the right margin of its parent box B if the margins are adjoining and B is ‘rl’ or ‘lr’.
A right margin of a box A collapses with the left margin of a sibling box B if the margins are adjoining and their parent is ‘rl’ or ‘lr’.
The left and right margins of a box A collapse (“collapse through”) if the margins are adjoining and the box is ‘rl’ or ‘lr’.

　　In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed.

- If A's parent is ‘rl’:
  - If A's margins are collapsed with its parent's right margin, the right border edge of A is defined to be the same as the parent's.
  - Otherwise (i.e., either the element's parent is not taking part in the margin collapsing, or only the parent's left margin is involved), the position of A's right border edge is the same as it would have been if A had a nonzero top border.
- If A's parent is ‘lr’:
  - If A's margins are collapsed with its parent's left margin, the left border edge of A is defined to be the same as the parent's.
  - Otherwise (i.e., either the element's parent is not taking part in the margin collapsing, or only the parent's right margin is involved),, the position of A's left border edge is the same as it would have been if A had a nonzero left border.

防止外边距重叠解决方案：
虽然外边距的重叠有其必定的意义，但有时候咱们在设计上却不想让元素之间产生重叠，那么能够有以下几个建议可供参考：

外层元素padding代替
内层元素透明边框 border:1px solid transparent;
内层元素绝对定位 postion:absolute:
外层元素 overflow:hidden;
内层元素加float:left;或display:inline-block;
内层元素padding:1px;

参考：http://www.w3.org/TR/2011/REC-CSS2-20110607/box.html

http://www.hujuntao.com/web/css/css-margin-overlap.html