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（非總寬度）的相應百分比的值。

即便是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做用：

1. BFC解決margin塌陷問題

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

   在一般狀況下父元素的高度會被子元素撐開，而若是父元素沒有設置高度，其子元素均爲浮動元素，此時父元素會發生了高度坍塌，上下邊界重合，即浮動元素沒法撐起父元素。這時就能夠用BFC來清除浮動了，將父元素總體設置爲BFC環境

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

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

參考文檔

10 分鐘理解 BFC 原理