成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

深究盒模型的margin合并問題

cyqian / 3224人閱讀

摘要：即我們常說的脫離文檔流的元素。如果一個元素不是流外的，即仍在文檔流中的元素，就叫流內(nèi)元素。兩個兄弟盒之間的豎直距離由屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直會合并。如果盒的和相鄰，那么可能會被徹底合并。

1.首先，了解一些詞匯

- 流內(nèi)元素?
如果一個元素是浮動的，絕對定位的或者是根元素，那么它就是流外元素。即我們常說的脫離文檔流的元素。如果一個元素不是流外的，即仍在文檔流中的元素，就叫流內(nèi)元素。
- 流內(nèi)塊級盒?
流內(nèi)塊級盒，就是流內(nèi)塊級元素生成的一個盒。
- 什么是格式化上下文？
常規(guī)流中的盒屬于一個格式化上下文，可能是塊或是內(nèi)聯(lián)，但不能都是（既是塊又是內(nèi)聯(lián)）。塊級盒參與塊格式化上下文。內(nèi)聯(lián)級盒參與內(nèi)聯(lián)格式化上下文 。在一個塊格式化上下文中，盒在豎直方向一個接一個地放置，從包含塊的頂部開始。兩個兄弟盒之間的豎直距離由margin屬性決定。同一個塊格式化上下文中的相鄰塊級盒之間的豎直margin會合并。
新建塊級格式化上下文（BFC)的條件：

浮動元素，float除了none以外的值。

絕對定位元素，position(absolute,fixed)

display 為以下其中之一的值 inline-blocks，table-cells，table-captions

overflow 除了 visible 以外的值（hidden，auto，scroll）

注意："display:table" 本身并不產(chǎn)生 BFC，而是由它產(chǎn)生匿名框，匿名框中包含 "display:table-cell" 的框會產(chǎn) BFC。

- 行盒（line box）
在一個行內(nèi)格式化上下文中，盒是一個接一個水平放置的，從包含塊的頂部開始。這些盒之間的水平margin，border和padding都有效。盒可能以不同的方式豎直對齊：以它們的底部或者頂部對齊，或者以它們里面的文本的基線對齊。包含來自同一行的盒的矩形區(qū)域叫做行盒
- 相鄰的margin?
兩個margin是相鄰的，當(dāng)且僅當(dāng)：

都屬于流內(nèi)塊級盒，處于同一個塊格式化上下文。

沒有行盒（line box），沒有空隙，沒有padding并且沒有border把它們隔開（注意，因此某些0高度行盒）

都屬于豎直相鄰盒邊（vertically-adjacent box edges），即來自下列某一對：

* 一個盒的top margin和它的第一個流內(nèi)子級的top margin
* 一個盒的bottom margin和它的下一個流內(nèi)后面的兄弟（its next in-flow following sibling）的top margin
* 最后一個流內(nèi)子級的bottom margin和它的父級的bottom margin，如果父級的高度的計算值為"auto"
* 一個盒的top和bottom margin，該盒沒有建立一個新的塊格式化上下文并且min-height的計算值為0，height的計算值為0或者"auto"，并且沒有流內(nèi)子級

如果一個margin的任何部分margin與另一個margin相鄰的話，就認(rèn)為它與那個margin相鄰，是合并（collapsed）margin。

2.什么是margin合并（重疊）

???????在CSS中，兩個或者多個盒（可能但不一定是兄弟）的相鄰的margin會被結(jié)合成一個margin。Margin按這種方式結(jié)合叫合并（collapse），產(chǎn)生的結(jié)合的margin叫做合并margin。

3.合并的規(guī)則

相鄰的豎直margin會合并，除了：

根元素的盒的margin不合并

如果一個有空隙（clearance）的元素的top和bottom margin是相鄰的，它的margin會與緊跟著的兄弟的相鄰margin合并，但產(chǎn)生的margin不會與父級塊的bottom margin合并

水平margin不會合并

合并的計算規(guī)則

當(dāng)兩個或者更多的margin合并時，產(chǎn)生的margin寬度為合并margin寬度中的最大值。

至于負(fù)margin，就從正相鄰margin的最大值中減去負(fù)相鄰margin的絕對值的最大值。

如果沒有正margin，就用0減去相鄰margin的絕對值的最大值

4.總結(jié)

所以綜上所述，只要兩個margin被隔開了，就一定不會發(fā)生margin重疊?？梢允巧舷耣order隔開，可以是被上下padding隔開，也可以是被高度隔開，可以是被流內(nèi)子級隔開，可以被空隙（空隙的產(chǎn)生與clear有關(guān)）隔開，可以被新建立的格式化上下文隔開。

以下是css2.1規(guī)范的總結(jié)

一個浮動的盒與任何其它盒之間的margin不會合并（甚至一個浮動盒與它的流內(nèi)子級之間也不會）任何浮動的、絕對定位的盒子不會與任何其他盒子的margin合并(原因：它們是流外塊級盒）。

建立了新的塊格式化上下文的元素（例如，浮動盒與overflow不為"visible"的元素）的margin不會與它們的流內(nèi)子級合并。（原因：不在同一個塊級格式化上下文）

絕對定位的盒的margin不會合并（甚至與它們的流內(nèi)子級也不會）把絕對定位的盒子比作飛起來的盒子，那么這兩個飛起來的盒子，一定處于不同高度，因此，不管這個盒子如何移動，都不會影響任何一個飛起來的盒子。

內(nèi)聯(lián)盒的margin不會合并（甚至與它們的流內(nèi)子級也不會）

一個流內(nèi)塊級元素的bottom margin總會與它的下一個流內(nèi)塊級兄弟的top margin合并，除非兄弟有空隙

一個流內(nèi)塊級元素的top margin會與它的第一個流內(nèi)塊級子級的top margin合并，如果該元素沒有top border，沒有top padding并且該子級沒有空隙

一個"height"為"auto"并且"min-height"為0的流內(nèi)塊級盒的bottom margin會與它的最后一個流內(nèi)塊級子級的bottom margin合并，如果該盒沒有bottom padding并且沒有bottom border并且子級的bottom margin不與有空隙的top margin合并

盒自身的margin也會合并，如果"min-height"屬性為0，并且既沒有top或者bottom border也沒有top或者bottom padding，并且其"height"為0或者"auto"，并且不含行盒，并且其所有流內(nèi)子級的margin（如果有的話）都合并了。

如果盒的top和bottom margin相鄰，那么可能會被徹底合并（collapse through）

margin。此時，元素的位置取決于與其它margin被合并了的元素的關(guān)系

如果該元素的margin與其父級的top margin合并了，盒的top border邊被定義為與其父級的相同

否則，要么該元素的父級沒有參與margin合并，要么只涉及其父級的bottom margin。如果該元素的bottom border不為0的話，其top border邊的位置將正常顯示（the same as it would have been）。
注意，已被徹底合并了的元素的位置不影響其它margin被合并的元素的位置，只有在布局這些元素的后代時，才需要top border邊的位置。

整理自css2.1規(guī)范：[http://www.ayqy.net/doc/css2-...]
以及：[http://www.jianshu.com/p/52a2...]

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112708.html

相關(guān)文章

  • CSS--外邊距合并的問題

    摘要：外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。外邊距合并初看上去可能有點奇怪，但是實際上，它是有意義的。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。 外邊距合并指的是，當(dāng)兩個垂直外邊距相遇時，它們將形成一個外邊距。 合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。 首先看下W3C對于外邊距合并的介紹： 外邊距合并...

    longshengwang 評論0 收藏0

  • CSS中盒模型的理解

    摘要：如圖為了方便大家理解和嘗試，我寫了一個小放上來方便大家嘗試顯示盒模型盒模型計算規(guī)則元素框的總寬度元素的的左邊距和右邊距的值的左邊距和右邊距的值的左右寬度元素框的總高度元素的的上下邊距的值的上下邊距的值的上下寬度。今天突然看到一篇關(guān)于CSS中盒模型的文章，忽然覺得自己竟然遺忘了很多小的地方，所以寫一篇文章來記憶一下 （摘抄于千與千尋寫的CSS盒子模型理解，并在自己基礎(chǔ)上添加了一些東西，希望更完...

    shmily 評論0 收藏0

  • HTML盒模型之"五環(huán)之歌"練習(xí)

    摘要：實際內(nèi)容盒子的內(nèi)容，顯示文本和圖像。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。在入門時學(xué)的盒模型這個練習(xí)對盒模型的熟練運用有幫助由個盒組成代碼如下五環(huán)之歌 五環(huán)之歌HTML5盒模型練習(xí) html任何一個元素都可以看作一個盒子，這個盒子不可見，但是它存在于頁面的每個角落，也正是由于它不可見、不直觀，很多人在初學(xué)CSS的時候不能透徹得理解盒模型的概念，導(dǎo)致在頁面布局中出...

    fizz 評論0 收藏0

  • HTML盒模型之"五環(huán)之歌"練習(xí)

    摘要：實際內(nèi)容盒子的內(nèi)容，顯示文本和圖像。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。在入門時學(xué)的盒模型這個練習(xí)對盒模型的熟練運用有幫助由個盒組成代碼如下五環(huán)之歌 五環(huán)之歌HTML5盒模型練習(xí) html任何一個元素都可以看作一個盒子，這個盒子不可見，但是它存在于頁面的每個角落，也正是由于它不可見、不直觀，很多人在初學(xué)CSS的時候不能透徹得理解盒模型的概念，導(dǎo)致在頁面布局中出...

    xiaowugui666 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<