margin折叠的难题讨论

2021-01-20 10:12 jianzhan

 前几日,有个电面问道了这个难题,赶紧补1下这层面的缺口。下列是1下在网上搜集的材料:

margin折叠的难题,并不是bug,而是一切正常的标准。

在css2.1中,水平的margin不容易被折叠。

竖直margin将会在1些盒实体模型中被折叠:

 1、在基本文本文档流中,2个或以上的块级盒实体模型邻近的竖直margin会被折叠。
最后的margin值测算方式以下:
    a、所有都为恰逢,取最大者;
    b、不都是恰逢,则都取肯定值,随后用恰逢减去最大值;
    c、沒有恰逢,则都取肯定值,随后用0减去最大值。
留意:邻近的盒实体模型将会由DOM元素动态性造成并沒有邻近或承继关联。

2、邻近的盒实体模型中,假如在其中的1个是波动的(floated),竖直margin不容易被折叠,乃至1个波动的盒实体模型和它的子元素之间也是这样。

3、设定了overflow特性的元素和它的子元素之间的margin不容易被折叠(overflow赋值为visible以外)。

4、设定了肯定精准定位(position:absolute)的盒实体模型,竖直margin不容易被折叠,乃至和她们的子元素之间也是1样。

5、设定了display:inline-block的元素,竖直margin不容易被折叠,乃至和她们的子元素之间也是1样。

6、假如1个盒实体模型的左右margin邻近,这时候它的margin将会折叠遮盖(collapse through)它。在这类状况下,元素的部位(position)取决于它的邻近元素的margin是不是被折叠。
    a、假如元素的margin和它的父元素的margin-top折叠在1起,盒实体模型border-top的界限界定和它的父元素同样。
    b、此外,随意元素的父元素不参加margin的折叠,或说仅有父元素的margin-bottom是参加测算的。假如元素的border-top非零,那末元素的border-top界限部位和原先1样。
1个运用了消除实际操作的元素的margin-top决不会和它的块级父元素的margin-bottom折叠。
留意,那些早已被折叠遮盖的元素的部位对别的早已被折叠的元素的部位沒有任何危害;仅有在对这些元素的子元素精准定位时,border-top界限部位才是必须的。

7、根元素的竖直margin不容易被折叠。

波动的块级元素的margin-bottom一直与它后边的波动块级弟兄元素(floated next in-flow block-level sibling)的margin-top邻近,除非那个同级元素应用了消除实际操作。

波动的块级元素的margin-top和它的第1个波动块级子元素(floated first in-flow block-level child)的margin-top邻近(假如该元素沒有border-top,沒有padding-top,而且子元素沒有应用消除实际操作)。

波动的块级元素的margin-bottom假如合乎以下标准,那末它和它的最终1个波动块级子元素的margin-bottom邻近(假如该元素沒有特定padding-bottom或border): a、特定了height:auto b、min-height小于元素的具体应用高宽比(height) c、max-height超过元素的具体应用高宽比(height)

假如1个元素的min-height特性设定为0,那末它所有着的margin是邻近的,而且它既沒有border-top和border-bottom,也沒有padding-top和padding-bottom,它的height特性能够是0或auto,它不可以包括1个内联的盒实体模型(line box),它全部的波动子元素(假如有的话)的margin也全是邻近的。

当1个元素有着的margin折叠了,而且它应用了消除实际操作,那末它的margin-top会和紧随其后的弟兄元素的邻近margin折叠,但結果是它的margin将没法和其块级父元素的margin-bottom折叠。

折叠实际操作是以padding、margin、border的值为基本的(即在访问器分析全部这些值以后),折叠后的margin测算将遮盖已应用的不一样margin的值。