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

柏成發表於2020-12-28

盒模型

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

  • W3C標準盒模型(預設):box-sizing: content-box

    • paddingborder都會撐開盒子,改變盒子的寬度高度
    • 總寬度:width + 左右border寬度 + 左右padding寬度 + 左右margin寬度
    • 內盒寬度:width + 左右border寬度 + 左右padding寬度
  • IE盒模型:box-sizing: border-box

    • paddingborder都不會撐開盒子,不會改變盒子的寬度,盒子的內容會相應縮小
    • 總寬度:width + 左右margin寬度
    • 內盒寬度: width

盒子模型佈局穩定性

我們根據穩定性來分,建議如下:

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

原因:

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

padding margin 百分比

marginpadding的值設定為百分比時,是相對於最近的塊級或內聯塊父元素width(非總寬度)的相應百分比的值。

即使是margin-topmargin-bottompadding-toppadding-bottom,設定為百分比時也是以最近塊級父元素的width(非總寬度)為基準,而非height

margin塌陷問題

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

    當上下相鄰的兩個塊元素相遇時,如果上面的元素有下外邊距margin-bottom,下面的元素有上外邊距margin-top,則他們之間的垂直間距不是margin-bottommargin-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 以外的值 (hiddenautoscroll)
  • float:除 none 以外的值
  • display inline-blockflex
  • positionabsolutefixed

BFC作用:

  1. BFC解決margin塌陷問題

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

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

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

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

參考文件

10 分鐘理解 BFC 原理

相關文章