10分鐘複習CSS盒模型與BFC css盒模型與BFC

css盒模型與BFC

1. 本文爲收集整理總結網上資源
2. 旨在系統複習css盒模型與bfc
3. 節省複習時間
4. 閱讀10分鐘

什麼是盒模型

每一個文檔中，每個元素都被表示爲一個矩形的盒子,它都會具有內容區、padding、border、margin

盒模型主要分兩種

1. 標準盒模型
2. IE盒模型(怪異盒模型)

兩者的區別：

1. 標準盒模型的寬高則爲內容區域的寬高
2. IE盒模型則寬高爲 border + padding + 內容區

如何切換盒子模型?

使用box-sizing來進行切換

1. border-box 切換爲IE盒模型
2. content-box 默認屬性 爲標準模式

盒模型的邊距重疊

主要分三種重疊， 重疊規則：一大一小取最大,一正一負取和

1. 相鄰元素之間的重疊
2. 父子嵌套的重疊
3. 空的塊級元素

1.相鄰元素之間

// css
* {
  margin:0;
  padding:0;
  border:0;
}

#d1 {
  width:100px;
  height:100px;
  margin-top:20px;
  margin-bottom:20px;
  background-color:red;
}

#d2 {
  width:100px;
  height:100px;
  margin-top:10px;
  background-color:blue;
}

// html
<div id="d1">
</div>

<div id="d2">
</div>

2.父子嵌套重疊

// css

* {
  margin:0;
  padding:0;
  border:0;
}

#outer {
  width:300px;
  height:300px;
  background-color:red;
  margin-top:20px;
}

#inner {
  width:50px;
  height:50px;
  background-color:blue;
  margin-top:10px;
}

// html 
<div id="outer">
  <div id="inner">
  </div>
</div>

空的塊級元素

BFC (邊距重疊處理方案)

什麼是BFC

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是佈局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。

塊級盒

每個塊級盒子都會參與塊格式化上下文（block formatting context）的創建，而每個塊級元素都會至少生成一個塊級盒子，即主塊級盒子（principal block-level box）

有時候定義了一個塊級元素,設置了寬高雖然佔據一行在chrome下會發現除了元素以外的一個包裹盒子像margin一樣的顏色,這個就是塊級盒;

每一個塊級元素會生成一個

塊級盒子的幾種特性

1. 塊級盒會在垂直方向，一個接一個地放置，每個盒子水平佔滿整個容器空間
2. 塊級盒的垂直方向距離由上下 margin 決定，同屬於一個 BFC 中的兩個或以上塊級盒的相接的 margin 會發生重疊
3. BFC 就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。
4. 計算 BFC 的高度時，浮動元素也參與計算

如何創建BFC?

1. 根元素或包含根元素的元素
2. 浮動元素（元素的 float 不是 none）
3. 絕對定位元素（元素的 position 爲 absolute 或 fixed）
4. overflow 值不爲 visible 的塊元素
5. display的值爲inline-block、table-cell、table-caption

BFC的應用？

1. 清除浮動
2. 佈局
3. 解決塊級盒邊距重疊

佈局

原理就是觸發BFC重新計算元素尺寸

// html
<div></div>
<p>
    開始清除浮動清除浮動清除浮動....
</p>

// css
    *{
        margin: 0;
        padding: 0;
    }
        div{
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
        p{
            background: #f0faa5;
            overflow: hidden;
        }

清除浮動

// html
<section class="divwrap">
        <div class="div1">
            float1  
        </div>
        <div class="div2">
            float2
        </div>
    </section>
    
//css
*{
    margin: 0;
    padding: 0;
}
div{
    width: 100px;
    height: 100px;
    background: green;
    float: left;
}
.div2{
    background: red;
}
.divwrap{
    border:3px solid #000;
    overflow: hidden;
}

解決邊距重疊

// html
<div class="BFC">
        <p>
            hello world
        </p>
    </div>

    <p>
        hello world
    </p>
    <p>
        hello world
    </p>

// css
    *{
        margin: 0;
        padding: 0;
    }
    .BFC{
        overflow:hidden;
    }
    p{
        color:black;
        background:#D499B9;
        line-height:100px;
        width:200px;
        text-align:center;
        margin:50px;
    }
    

最後

最後感謝每個閱讀的小夥伴與所有寫博客分享的人

參考資料

1. MDN-CSS盒模型
2. MDN-外邊距合併
3. w3school-外邊距重疊
4. MDN-視覺格式化模型
5. MDN-塊格式化上下文
6. 芋頭君-CSS之BFC詳解
7. OBKoro1-佈局概念 關於CSS-BFC深入理解