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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。