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

資訊專欄INFORMATION COLUMN

CSS--外邊距合并的問題

longshengwang / 3203人閱讀

摘要:外邊距合并指的是,當(dāng)兩個垂直外邊距相遇時,它們將形成一個外邊距。外邊距合并初看上去可能有點奇怪,但是實際上,它是有意義的。如果發(fā)生外邊距合并,段落之間的上外邊距和下外邊距就合并在一起,這樣各處的距離就一致了。

外邊距合并指的是,當(dāng)兩個垂直外邊距相遇時,它們將形成一個外邊距。 合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

首先看下W3C對于外邊距合并的介紹:

外邊距合并

簡單地說,外邊距合并指的是,當(dāng)兩個垂直外邊距相遇時,它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。

當(dāng)一個元素出現(xiàn)在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。請看下圖:

當(dāng)一個元素包含在另一個元素中時(假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開),它們的上和/或下外邊距也會發(fā)生合并。請看下圖:

盡管看上去有些奇怪,但是外邊距甚至可以與自身發(fā)生合并。

假設(shè)有一個空元素,它有外邊距,但是沒有邊框或填充。在這種情況下,上外邊距與下外邊距就碰到了一起,它們會發(fā)生合并:

如果這個外邊距遇到另一個元素的外邊距,它還會發(fā)生合并:

這就是一系列的段落元素占用空間非常小的原因,因為它們的所有外邊距都合并到一起,形成了一個小的外邊距。

外邊距合并初看上去可能有點奇怪,但是實際上,它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并,后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發(fā)生外邊距合并,段落之間的上外邊距和下外邊距就合并在一起,這樣各處的距離就一致了。

注釋: 只有普通文檔流中塊框的垂直外邊距才會發(fā)生外邊距合并。行內(nèi)框、浮動框或絕對定位之間的外邊距不會合并。在css2.1中,水平的margin不會被折疊。

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

在常規(guī)文檔流中,2個或以上的塊級盒模型相鄰的垂直margin會被折疊。
最終的margin值計算方法如下:

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

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

沒有正值,則都取絕對值,然后用0減去最大值。
注意:相鄰的盒模型可能由DOM元素動態(tài)產(chǎn)生并沒有相鄰或繼承關(guān)系。

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

設(shè)置了overflow屬性的元素和它的子元素之間的margin不會被折疊(overflow取值為visible除外)。

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

設(shè)置了display:inline-block的元素,垂直margin不會被折疊,甚至和他們的子元素之間也是一樣。

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

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

另外,任意元素的父元素不參與margin的折疊,或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零,那么元素的border-top邊界位置和原來一樣。
一個應(yīng)用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom折疊。

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

根元素的垂直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):

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

當(dāng)一個元素?fù)碛械膍argin折疊了,并且它使用了清除操作,那么它的margin-top會和緊隨其后的兄弟元素的相鄰margin折疊,但結(jié)果是它的margin將無法和其塊級父元素的margin-bottom折疊。

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

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

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

相關(guān)文章

  • CSS」Margin Collapsing - 外邊合并

    摘要:外邊距合并都是基于以下三種基本的外邊距合并??赵厮约旱纳贤膺吘嗪拖峦膺吘嗪喜⒘恕W柚雇膺吘嗪喜⒌诙N情況不合并設(shè)置不為都可。 外邊距合并在排版上帶來非常大的便利,但是人們對其不甚了解,導(dǎo)致使用外邊距的時候總是出現(xiàn)繁多問題,今日寫下一片文章,總結(jié)一下外邊距合并。 三種基本的外邊距合并 只有上外邊距和下外邊距才會觸發(fā)外邊距合并,左外邊距和右外邊距不會。外邊距合并都是基于以下三種基本的外...

    cheukyin 評論0 收藏0
  • CSS 盒模型

    摘要:概覽盒模型也叫框模型,規(guī)定了元素框處理元素內(nèi)容內(nèi)邊距邊框和外邊距的方式。不幸的是,和在使用自己的非標(biāo)準(zhǔn)模型。當(dāng)一個元素出現(xiàn)在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發(fā)生合并。如果缺少右外邊距的值,則使用上外邊距的值。 概覽 CSS 盒模型 (Box Model)也叫框模型,規(guī)定了元素框處理元素 內(nèi)容、 內(nèi)邊距、 邊框 和 外邊距 的方式。 showImg(http...

    heartFollower 評論0 收藏0
  • css margin學(xué)習(xí)筆記

    摘要:的特性始終是透明的。例如就等于如果只有兩個值,第一個值表示上下值,第二個值為左右的值。垂直外邊距合并問題外邊距合并指的是,當(dāng)兩個垂直外邊距相遇時,它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。 Margin的特性 margin始終是透明的。 margin通過使用單獨(dú)的屬性,可以對上、右、下、左的外邊距進(jìn)行設(shè)置。即:margin-top、marg...

    leiyi 評論0 收藏0
  • CSS盒子模型以及外邊合并問題

    摘要:盒子模型我們把布局里面的所有東西都可以想象成一個盒子,盒子里面又裝著小盒子,小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的,但是我們算元素的總寬度或者總高度的時候,要加上外邊距。 盒子模型 我們把布局里面的所有東西都可以想象成一個盒子,盒子里面又裝著小盒子,小盒子里面又裝著小小盒子......所以布局的萬物基于盒子。即使一個小小的元素p,也可以把它抽象成為一個盒子...

    zacklee 評論0 收藏0
  • CSS盒子模型以及外邊合并問題

    摘要:盒子模型我們把布局里面的所有東西都可以想象成一個盒子,盒子里面又裝著小盒子,小盒子里面又裝著小小盒子所以布局的萬物基于盒子。雖然外邊距是不可見的,但是我們算元素的總寬度或者總高度的時候,要加上外邊距。 盒子模型 我們把布局里面的所有東西都可以想象成一個盒子,盒子里面又裝著小盒子,小盒子里面又裝著小小盒子......所以布局的萬物基于盒子。即使一個小小的元素p,也可以把它抽象成為一個盒子...

    paulli3 評論0 收藏0

發(fā)表評論

0條評論

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