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

時間 2019-11-17

標籤 css 邊距 margin 重疊防止方法欄目 CSS 简体版

原文原文鏈接

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

#1-什麼是外邊距margin重疊1. 什麼是外邊距(margin)重疊

外邊距重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一塊兒而造成一個單一邊界。css

#2-相鄰marign重疊的問題2. 相鄰marign重疊的問題

#21-示例2.1 示例

<style>
    *{
        margin:0;
        padding: 0;
    }
    .divout{
        width: 100px;
        height: 100px;
        background: yellow;
        margin-bottom: 50px;
        border: 1px solid black;
    }
    .divout1{
        width:50px;
        height: 50px;
        background: yellow;
        margin-top: 80px;
            /*float:left;*/
        /*position:absolute;*/
        border: 1px solid black;
    }
</style>
<body>
    <div class="divout">        
    </div>
    <div class="divout1">        
    </div>
</body>
複製代碼

#22-外邊距重疊計算方式2.2 外邊距重疊計算方式

所有都爲正值，取最大者；

不全是正值，則都取絕對值，而後用正值的最大值減去絕對值的最大值；

沒有正值，則都取絕對值，而後用0減去最大值。

#23-解決辦法2.3 解決辦法

底部元素設置爲浮動 float:left;html

底部元素的position的值爲absolute/fixedgit

在設置margin-top/bottom值時統一設置上或下github

#3-元素和父元素margin值問題3. 元素和父元素margin值問題

父元素無 border、padding、inline content 、 clearance時，子元素的margin-top/bottom會與父元素的margin產生重疊問題。post

#31-示例3.1 示例

<style>
    *{
        margin:0;
        padding: 0;
        color: black;
    }
    #parrent{
        width:300px;
        height:150px;
        margin-top: 20px;
        background:teal;
    }
    #box1{
        width:100px;
        height:100px;
        background:aqua;
        margin:100px 0;
    }
</style>
<body>
    <div id="parrent">
        <div id="box1">
        我是box1
        </div>
        我是內容
    </div>
</body>
複製代碼

#32-解決辦法3.2 解決辦法

外層元素添加padding
外層元素 overflow:hidden;
外層元素透明邊框 border:1px solid transparent;
內層元素絕對定位 postion:absolute:
內層元素加float:left;或display:inline-block;

#4-相關文章

史上最全面、最透徹的BFC原理剖析spa

CSS清浮動處理（Clear與BFC）設計

邊界重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一塊兒而造成一個單一邊界。3d

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

可是邊界的重疊也有例外狀況：cdn

一、水平邊距永遠不會重合。

二、在規範文檔中，2個或以上的塊級盒模型相鄰的垂直margin會重疊。最終的margin值計算方法以下：

a、所有都爲正值，取最大者；

b、不全是正值，則都取絕對值，而後用正值減去最大值；

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

注意：相鄰的盒模型可能由DOM元素動態產生並無相鄰或繼承關係。

三、相鄰的盒模型中，若是其中的一個是浮動的（float），垂直margin不會重疊，而且浮動的盒模型和它的子元素之間也是這樣。

四、設置了overflow屬性的元素和它的子元素之間的margin不被重疊（overflow取值爲visible除外）。

五、設置了絕對定位（position:absolute）的盒模型，垂直margin不會被重疊，而且和他們的子元素之間也是同樣。

六、設置了display:inline-block的元素，垂直margin不會重疊，甚至和他們的子元素之間也是同樣。

七、若是一個盒模型的上下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邊界位置纔是必需的。

八、根元素的垂直margin不會被重疊。

外邊距(margin)重疊示例

外邊距重疊是指兩個垂直相鄰的塊級元素，當上下兩個邊距相遇時，起外邊距會產生重疊現象，且重疊後的外邊距，等於其中較大者。

圖示：

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

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

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

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

外邊距重疊的意義

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

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

雖然外邊距的重疊有其必定的意義，但有時候咱們在設計上卻不想讓元素之間產生重疊，那麼能夠有以下幾個建議可供參考：

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

以上建議可根據實際狀況來採起。

相關文章

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<