CSS系列 (04)：盒模型詳解

盒模型

CSS盒模型分成W3C標准盒模型和IE模型

• W3C標准盒模型(默認)：box-sizing: content-box

  • padding和border都會撐開盒子，改變盒子的寬度高度
  • 總寬度：width + 左右border寬度 + 左右padding寬度 + 左右margin寬度
  • 內盒寬度：width + 左右border寬度 + 左右padding寬度

• IE盒模型：box-sizing: border-box

  • padding和border都不會撐開盒子，不會改變盒子的寬度，盒子的內容會相應縮小
  • 總寬度：width + 左右margin寬度
  • 內盒寬度： width

盒子模型布局穩定性

我們根據穩定性來分，建議如下：

按照 優先使用寬度，其次使用內邊距，再次外邊距。 即：width > padding > margin

原因：

（1）margin 會有外邊距合並
（2）padding 會影響盒子大小，需要進行加減計算（麻煩） 其次使用
（3）width 沒有問題我們經常使用寬度剩余法來做

padding margin 百分比

當margin和padding的值設置為百分比時，是相對於最近的塊級或內聯塊父元素width（非總寬度，不包括padding border margin）的相應百分比的值。
即使是margin-top、margin-bottom、padding-top、padding-bottom，設置為百分比時也是以最近塊級父元素的width（非總寬度）為基准，而非height。

margin塌陷問題

• 相鄰塊元素垂直外邊距的合並

  當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱為相鄰塊元素垂直外邊距的合並（也稱外邊距塌陷）。

  

  解決方法：

  • 將其放在不同的 BFC 父容器中

    <div class="container">
        <div class="child"></div>
    </div>
    <div class="container">
        <div class="child"></div>
    </div>
    
    .container {
        overflow: hidden;
    }
    .child {
        width: 100px;
        height: 100px;
        background: #f0;
        margin: 100px;
    }
    

• 嵌套塊元素垂直外邊距的合並

  對於兩個嵌套關系的塊元素，必須是block元素。如果父元素沒有上內邊距padding、沒有上邊框border、沒有內容，則父元素的上外邊距會與子元素的上外邊距發生合並，合並后的外邊距取其較大者。即使父元素的上外邊距為0，也會發生合並。

  

  解決方法：

  • 給父元素加 overflow：hidden，相當於給父元素添加了一個BFC
  • 給父元素加上內邊距 或 上邊框

BFC

BFC 全稱為塊格式化上下文 (Block Formatting Context) 。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用

BFC觸發條件：

• overflow：除 visible 以外的值 (hidden、auto、scroll)
• float：除 none 以外的值
• display： inline-block、flex
• position：absolute、fixed

BFC渲染規則：

本質：BFC區域可以看做是頁面上一個隔離的獨立容器，容器里面的元素與容器外面的元素在布局方面不會相互影響

• BFC區域內也會出現相鄰塊元素垂直外邊距的合並現象，曲線救國：將其中一個元素單獨放入BFC父容器中

  應用：BFC作用 - 2【BFC解決margin塌陷問題 - 相鄰塊元素垂直外邊距的合並】

  原理：將其中一個元素單獨放入BFC父容器中，容器里面的元素與容器外面的元素在布局方面不會相互影響

• 計算BFC區域高度時，浮動元素和嵌套塊元素中子元素的margin-top也會參與計算

  應用：BFC作用 - 2【BFC解決浮動元素引起父元素高度塌陷問題】、BFC作用 - 3【BFC解決margin塌陷問題 - 嵌套塊元素垂直外邊距的合並】

  原理：BFC區域不影響外面元素的布局，所以浮動元素也參與了高度計算；margin塌陷問題 - 嵌套塊元素垂直外邊距的合並同理

• BFC區域不會與浮動元素重疊

  應用：BFC作用 - 4【BFC解決元素被浮動元素覆蓋問題】

  原理：外面元素不影響BFC區域布局，所以BFC區域不會被浮動元素覆蓋

BFC作用：

1. BFC解決margin塌陷問題 - 兄弟元素塌陷

2. BFC解決margin塌陷問題 - 父子元素塌陷

3. BFC解決浮動元素引起父元素高度塌陷問題

   在通常情況下父元素的高度會被子元素撐開，而如果父元素沒有設置高度，其子元素均為浮動元素，此時父元素會發生了高度坍塌，上下邊界重合，即浮動元素無法撐起父元素。這時就可以用BFC來清除浮動了，將父元素整體設置為BFC環境

4. BFC解決元素被浮動元素覆蓋問題

   如果有兩個相鄰 元素，第一個元素左浮動，第二個元素不設置浮動，這時候第二個元素會有部分被浮動元素所覆蓋(但是文本信息不會被浮動元素所覆蓋)。 如果想避免元素被覆蓋，可觸發第二個元素的 BFC 特性，在第二個元素中加入 overflow: hidden即可

參考文檔

10 分鍾理解 BFC 原理