margin 邊界摺疊是什麼以及解決方法

時間 2019-11-21

標籤 margin 邊界摺疊什麼以及解決方法欄目 CSS 简体版

原文原文鏈接

margin 邊界摺疊是什麼？html

邊界摺疊是指當兩個垂直外邊距相遇時，此時的外邊距不等於兩個相加，而是取兩個外邊距中較大的值，margin 邊界摺疊只會發生在同一個 BFC 中。ide

margin 邊界摺疊的解決方法ui

margin 邊界疊加只會出如今普通文檔流中，因此能夠觸發 BFC 來解決。
使用 padding 來代替 margin 或者增長 border 的值。

BFC 是什麼？特性有什麼？spa

BFC —— 塊格式化上下文code

參考一下 MDN https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_contextorm

如何建立一個 BFChtm

根元素（<html>）
浮動元素（元素的 float 不是 none ）
絕對定位元素（元素的 position 爲 absolute 或者 fixed ）
行內塊元素（元素的 display 爲 inline-block）
表格單元格（元素的 display 爲 table-cell）
表格標題（元素的 display 爲 table-caption）
匿名錶格單元格元素
overflow 值不爲 visible 的塊元素
display 值爲 flow-root 的元素

emmm~~~~ 好像有點虛哦豁blog

那就來點例子充實一下吧！文檔

解決 margin 邊界摺疊問題 —— 一個 BFC

<div class='d1'>11</div>
<div class='d2>22</div>

<style>
    .d1 {
        width: 100px;
        height: 100px;
        background: #f00;
        margin-bottom: 40px;
    }
    .d2 {
        width: 100px;
        height: 100px;
        background: #0f0;
        margin-top: 50px;
    }
</style>

// 此時會產生 margin 邊界摺疊，設想這兩個相鄰的 div 之間應該間隔
// 90px，實際上只有50px;

解決方法即是講兩個div從一個BFC中拆分紅兩個BFCget

<div class='d1'>11</div>
<div class='d2-outer'>
    <div class='d2>22</div>
</div>

<style>
    .d1 {
        width: 100px;
        height: 100px;
        background: #f00;
        margin-bottom: 40px;
    }

    .d2-outer {
        overflow: hidden;  // 生成BFC的條件
    }

    .d2 {
        width: 100px;
        height: 100px;
        background: #0f0;
        margin-top: 50px;
    }


// 此時達到設想，.d1 和 .d2 兩個div相距90px;

　　2. 順便再看一個例子——使BFC內部浮動元素不要亂跑~~

// 如今用一個父元素包裹一個子元素
<div class='outer'>
    <div class='inner'></div>
</div>

<style>
    .outer {
        min-height: 100px;
        border: 10px solid red;
    }

    .inner {
        background: green;
        widht: 300px;
        height: 100px;
    }

// 此時是正常的文檔流，因此父元素包裹着子元素，一切都那麼的順風順水

能夠一旦給子元素增長一個float 或者 position: absolute，使得子元素脫離了文檔流，那麼父元素就會出現坍塌

解決方法能夠參考 MDN 裏面的例子

因此如今咱們把代碼修改爲

<div class='outer>
    <div class='inner></div>
</div>

<style>
        .out {
            border: 10px solid red;
            min-height: 20px; overflow: auto;
        }
        .inner {
            height: 100px;
            width: 300px;
            background: green; float: left;
        }
</style>

相關標籤/搜索

每日一句

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