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

柏成發表於2020-12-28
CSS模型

盒模型

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 原理

相關文章