子元素用margin top 為什麼反而作用在父元素上?對使

2022-02-27 09:03:22 字數 2847 閱讀 2314

1樓:檻外人網上人生

在這個說明中,「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的值。

2樓:匿名使用者

ls看起來好專業 沒看懂 = = 作為菜鳥 我只想說 如果換成非ie核心 比方說ff 比方說chrome 再來看你編輯的html 或者就正常了。。。

現在css裡面margin還有沒有父級div繼承子級div margin-top的問題?

3樓:言言言小魚

這位網友你好,margin不會繼承,繼承也是子元素繼承父元素~你遇到的是margin垂直外邊距合併問題,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

垂直外邊距合併問題常見於第一個子元素的margin-top會頂開父元素與父元素相鄰元素的間距,而且只在標準瀏覽器下

(firffox、chrome、opera、sarfi)產生問題,ie下反而表現良好。

這個問題發生的原因是根據規範,一個盒子如果沒有上補白(padding-top)和上邊框(border-top),那麼這個盒子的上邊距會和其內部文件流中的第一個子元素的上邊距重疊。

再說了白點就是:父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己

「領導」(父元素,祖先元素)的麻煩。只要給領導設定個有效的

border或者padding就可以有效的管制這個目無領導的margin防止它越級,假傳聖旨,把自己的margin當領導的margin執行。

對於垂直外邊距合併的解決方案上面已經解釋了,為父元素例子中的middle元素增加一個border-top或者padding-top即可解決這個問題。

為什么元素週期表的後部分全是放射性元素呢

元素週期表後面的元素電子層數較多,原子半徑較大。而原子核的電性越強,原子半徑越大,原子核就越難束縛住裡面的粒子,粒子便會放出,形成alpha beta gamma三種射線,並釋放出原子核內的能量。至於中間的元素,大概是因為個別原子結構不穩定造成的吧。元素週期律是經驗規律,並不 能解釋所有的問題.解釋...

我們知道 生物是由很多種元素組成的,但是為什麼我們用這些元素卻無法組成生命體

我們現在只是知道有哪些元素,但是並不知道它們的組成方式等方面的知識。就好比你有了磚頭,水泥等各種材料,但是沒有圖紙的話還是不可能建一座高樓。更不要說生命體這麼複雜的東西了。話說現在有人做出了人造生命,但是也不是直接用元素造的 生物生命是元素鑄就,那麼,為什麼將生物生命中所含的元素結合在一起不能生成生...

由兒童這個詞,能想到什麼。或者說是用什么元素可以代表兒童。越多越好,像是鉛筆 蠟筆 腳丫 積木

捉泥鰍 風箏 棉花糖 氣球 祖國的未來 花朵 寶貝 希望 寄託 生命的延續。玩具 零食 奶粉 嬰幼用品 童裝 童車 書本 學習用具 氣球,花朵,未來,青春,朝氣,蓬勃,歡樂,天真,純潔,可愛。幻想 假如我是一個母親,應該怎樣教育自己的孩子。以作文的方式把它寫出來 要800字題目自擬 描寫人物的好段 ...