css CSS中摺疊margin的問題

2022-02-10 14:26:27 字數 2341 閱讀 4642

為什麼要翻譯這篇說明?css2本有人已翻譯過,但看一下,很粗糙(不是說自己就怎麼怎麼樣啊,翻譯者真的是很值得敬佩的!),近來跟css與xhtml接觸得越來越多,但接觸得越多,迷惑卻總不見少。

現在我覺得很多問題根本不能稱之為問題,原因就在於我們的草率理解,比如殺雞用牛刀,不是不可以,是不合理、不恰當,根源錯了,表象也就會錯了,如果解決問題從表象入手,難免總會摸不著頭腦,還是那句話,要腳踏實地,切莫浮躁。

在這個說明中,「collapsing margins」(摺疊margin)的意思是:2個或以上盒模型之間(關係可以是相鄰或巢狀)相鄰的margin屬性(這之間不能有非空內容、padding區域、border邊框或使用清除分離方法)結合表示為乙個單獨的margin。

在css2.1中,水平的margin不會被摺疊。

垂直margin可能在一些盒模型中被摺疊:

1、在常規文件流中,2個或以上的塊級盒模型相鄰的垂直margin會被摺疊。

最終的margin值計算方法如下:

a、全部都為正值,取最大者;

b、不全是正值,則都取絕對值,然後用正值減去最大值;

c、沒有正值,則都取絕對值,然後用0減去最大值。

注意:相鄰的盒模型可能由dom元素動態產生並沒有相鄰或繼承關係。

2、相鄰的和模型中,如果其中的乙個是浮動的(floated),垂直margin不會被摺疊,甚至乙個浮動的盒模型和它的子元素之間也是這樣。

3、設定了overflow屬性的元素和它的子元素之間的margin不會被摺疊(overflow取值為visible除外)。

4、設定了絕對定位(position:absolute)的盒模型,垂直margin不會被摺疊,甚至和他們的子元素之間也是一樣。

5、設定了display:inline-block的元素,垂直margin不會被摺疊,甚至和他們的子元素之間也是一樣。

6、如果乙個盒模型的上下margin相鄰,這時它的margin可能摺疊覆蓋(collapse through)它。在這種情況下,元素的位置(position)取決於它的相鄰元素的margin是否被摺疊。

a、如果元素的margin和它的父元素的margin-top摺疊在一起,盒模型border-top的邊界定義和它的父元素相同。

b、另外,任意元素的父元素不參與margin的摺疊,或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零,那麼元素的border-top邊界位置和原來一樣。

乙個應用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom摺疊。

注意,那些已經被摺疊覆蓋的元素的位置對其他已經被摺疊的元素的位置沒有任何影響;只有在對這些元素的子元素布局時,border-top邊界位置才是必需的。

7、根元素的垂直margin不會被摺疊。

浮動的塊級元素的margin-bottom總是與它後面的浮動塊級兄弟元素(floated next in-flow block-level sibling)的margin-top相鄰,除非那個同級元素使用了清除操作。

浮動的塊級元素的margin-top和它的第乙個浮動塊級子元素(floated first in-flow block-level child)的margin-top相鄰(如果該元素沒有border-top,沒有padding-top,並且子元素沒有使用清除操作)。

浮動的塊級元素的margin-bottom如果符合下列條件,那麼它和它的最後乙個浮動塊級子元素的margin-bottom相鄰(如果該元素沒有指定padding-bottom或border):

a、指定了height:auto

b、min-height小於元素的實際使用高度(height)

c、max-height大於元素的實際使用高度(height)

如果乙個元素的min-height屬性設定為0,那麼它所擁有的margin是相鄰的,並且它既沒有border-top和border-bottom,也沒有padding-top和padding-bottom,它的height屬性可以是0或auto,它不能包含乙個內聯的盒模型(line box),它所有的浮動子元素(如果有的話)的margin也都是相鄰的。

當乙個元素擁有的margin摺疊了,並且它使用了清除操作,那麼它的margin-top會和緊隨其後的兄弟元素的相鄰margin摺疊,但結果是它的margin將無法和其塊級父元素的margin-bottom摺疊。

摺疊操作是以padding、margin、border的值為基礎的(即在瀏覽器解析所有這些值之後),摺疊後的margin計算將覆蓋已使用的不同margin的值。

from:

css盒模型margin的摺疊

1.在css中,兩個或多個毗鄰的普通流中的塊級盒子 可能是父子元素,也可能是兄弟元素 在垂直方向上的外邊距會發生疊加,這種形成的外邊距稱之為外邊距疊加。1.大於等於2個元素,且相鄰的兩個或多個元素都需符合下面所需的摺疊條件。2.垂直方向。3.元素處於普通流 浮動元素,絕對定位,固定定位不會和任何元素...

CSS框模型中關於外邊距 margin 摺疊的情況

最近做了個專案,居然在乙個小小的css問題上折騰了很久很是 糾結 外邊距摺疊的問題。今天難得清閒,就把這個問題研究了一下,才發現大有學問,所以寫篇博文整理一下,以便更加牢記!外邊距摺疊,指的是 毗鄰的兩個或多個外邊距 margin 在垂直方向會合併成乙個外邊距。觸發條件 毗鄰,沒有被非空內容 pad...

框模型之外邊距 margin 摺疊

首先回顧一下margin的特性 現在重點來看下外邊據摺疊的情況。collapsing margins,即外邊距摺疊,指的是毗鄰的兩個或多個外邊距 margin 會合併成乙個外邊距。其中所說的 margin 毗鄰,可以歸結為以下兩點 下面詳細的介紹其規則。兩個或多個 說明其數量必須是大於乙個,又說明,...