10分鐘複習CSS盒模型與BFC

css盒模型與BFC

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

什麼是盒模型

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

css盒模型.png

盒模型主要分兩種

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

兩者的區別：

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

兩種盒模型.jpg

如何切換盒子模型?

使用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一樣的顏色,這個就是塊級盒;

塊級盒子.png

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

塊級盒子的幾種特性

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應用佈局.gif

原理就是觸發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;
        }

清除浮動

BFC清除浮動.gif

// 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;
}

解決邊距重疊

BFC清除上下邊距.gif

// 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深入理解