国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS 外邊距(margin)重疊及防止方法

劉東 / 900人閱讀

摘要:結果的邊界寬度是相鄰邊界寬度中最大的值。但是邊界的重疊也有例外情況水平邊距永遠不會重合。外邊距重疊示例外邊距重疊是指兩個垂直相鄰的塊級元素,當上下兩個邊距相遇時,起外邊距會產生重疊現象,且重疊后的外邊距,等于其中較大者。

邊距重疊解決方案(BFC)

首先要明確BFC是什么意思,其全英文拼寫為 Block Formatting Context 直譯為“塊級格式化上下文”

?

兩個或多個塊級盒子的垂直相鄰邊界會重合。結果的邊界寬度是相鄰邊界寬度中最大的值。如果出現負邊界,則在最大的正邊界中減去絕對值最大的負邊界。如果沒有正邊界,則從零中減去絕對值最大的負邊界。注意:相鄰的盒子可能并非是由父子關系或同胞關系的元素生成。

但是邊界的重疊也有例外情況:

1、水平邊距永遠不會重合。
2、在規范文檔中,2個或以上的塊級盒模型相鄰的垂直margin會重疊。最終的margin值計算方法如下:
a、全部都為正值,取最大者;
b、不全是正值,則都取絕對值,然后用正值減去最大值;
c、沒有正值,則都取絕對值,然后用0減去最大值。
注意:相鄰的盒模型可能由DOM元素動態產生并沒有相鄰或繼承關系。
3、相鄰的盒模型中,如果其中的一個是浮動的(float),垂直margin不會重疊,并且浮動的盒模型和它的子元素之間也是這樣。
4、設置了overflow屬性的元素和它的子元素之間的margin不被重疊(overflow取值為visible除外)。
5、設置了絕對定位(position:absolute)的盒模型,垂直margin不會被重疊,并且和他們的子元素之間也是一樣。
6、設置了display:inline-block的元素,垂直margin不會重疊,甚至和他們的子元素之間也是一樣。
7、如果一個盒模型的上下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邊界位置才是必需的。
8、根元素的垂直margin不會被重疊。

外邊距(margin)重疊示例
外邊距重疊是指兩個垂直相鄰的塊級元素,當上下兩個邊距相遇時,起外邊距會產生重疊現象,且重疊后的外邊距,等于其中較大者。
圖示:

另一個重疊現象是當一個元素包含在另一個元素之中時,子元素與父元素之間也會產生重疊現象,重疊后的外邊距,等于其中最大者:

同理,如果一個無內容的空元素,其自身上下邊距也會產生重疊。

?

外邊距重疊的意義

外邊距的重疊只產生在普通流文檔的上下外邊距之間,這個看起來有點奇怪的規則,其實有其現實意義。設想,當我們上下排列一系列規則的塊級元素(如段落P)時,那么塊元素之間因為外邊距重疊的存在,段落之間就不會產生雙倍的距離。

?

案例:如下圖,父元素沒有設置margin-top,而子元素設置了margin-top:20px;可以看出,父元素也一起有了邊距。

?




    
    Document
    


    

此部分是能更容易看出讓下面的塊的margin-top。

子元素

margin-top:20px;

父元素

沒有設置margin-top

?

解決這個辦法:父元素設置padding-top:20px 或者設置 overflow:hidden,子元素取消margin-top:20px;

?

防止外邊距重疊解決方案:

? ? ? ? ?雖然外邊距的重疊有其一定的意義,但有時候我們在設計上卻不想讓元素之間產生重疊,那么可以有如下幾個建議可供參考:

  1. 外層元素padding代替
  2. 內層元素透明邊框 border:1px solid transparent;
  3. 內層元素絕對定位 postion:absolute:
  4. 外層元素 overflow:hidden;
  5. 內層元素 加float:left;或display:inline-block;
  6. 內層元素padding:1px;

以上建議可根據實際情況來采取。

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/1020.html

相關文章

  • 理解CSS布局和塊格式化上下文

    摘要:什么是塊格式化上下文,是頁面的可視化渲染的一部分,是塊盒子的布局過程發生的區域,也是浮動元素與其他元素交互的區域。直譯過來是格式化上下文,它是頁面中的一塊渲染區域,有一套渲染規則,決定了其子元素如何布局,以及和其他元素之間的關系和作用。 showImg(https://segmentfault.com/img/remote/1460000019193678); 在進行html布局及cs...

    Markxu 評論0 收藏0
  • 理解CSS布局和塊格式化上下文

    摘要:什么是塊格式化上下文,是頁面的可視化渲染的一部分,是塊盒子的布局過程發生的區域,也是浮動元素與其他元素交互的區域。直譯過來是格式化上下文,它是頁面中的一塊渲染區域,有一套渲染規則,決定了其子元素如何布局,以及和其他元素之間的關系和作用。 showImg(https://segmentfault.com/img/remote/1460000019193678); 在進行html布局及cs...

    cuieney 評論0 收藏0
  • css盒模型理解

    摘要:盒模型概念盒子模型又稱框模型,包含了元素內容內邊距邊框外邊距幾個要素。盒子垂直方向的距離由決定。屬于同一個的兩個相鄰盒子垂直方向的會發生重疊。計算高度時,自然也會檢測浮動的子盒子高度。總寬度總高度盒子設置的值其實是除外的的總寬度。 css盒模型概念 css盒子模型又稱框模型 (Box Model) ,包含了元素內容(content)、內邊距(padding)、邊框(border)、外邊...

    xingqiba 評論0 收藏0
  • CSS那些事

    摘要:今天跟大家分享一下中一些比較重要和比較容易被忽略的東西,開始吧。當為時,塊級元素的寬度會填滿整個包含塊。也就是說上下外邊距的值也是以父元素的寬度為標準的。 今天跟大家分享一下CSS中一些比較重要和比較容易被忽略的東西,開始吧。 樣式優先級 當你在不同地方不同的選擇器中對同一個元素屬性添加了不同的樣式的時候,該如何判斷最后哪個樣式會作用到元素上呢?判斷的依據就是樣式的優先級。樣式優先...

    LinkedME2016 評論0 收藏0
  • CCS 盒模型分析

    摘要:基本概念頁面中的每個元素都可以看成一個盒子,盒子里面可以裝其他盒子,層層嵌套。標簽就是最外面的大盒子。每個盒子由內向外分別是。分類盒模型有兩種,標準盒模型和盒模型。 基本概念 頁面中的每個元素都可以看成一個盒子,盒子里面可以裝其他盒子,層層嵌套。html 標簽就是最外面的大盒子。每個盒子由內向外分別是 content, padding, border, margin 。 showImg...

    Jochen 評論0 收藏0

發表評論

0條評論

劉東

|高級講師

TA的文章

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