CSS盒子模型

序言

CSS盒子模型算是CSS中最重要的一部分，在開發中遇到難以理解的現象，每每是由於對模型的理解不夠。 盒子模型主要有標準模型和IE模型，本文主要講述：

• 標準模型基本概念
• 標準模型與IE模型的區別
• 邊距重疊與BFC
• 其餘

標準模型基本概念

標準模型「默認：box-sizing: content-box」由四部分組成，從內到外依次是：

• 內容區域「content」：能夠放置元素的區域如文本，圖像等，通常設置寬高度指的是這個內容的寬高；
• 內邊距區域「padding」：內容與邊框之間的距離
• 邊框區域「border」：就是邊框
• 外邊距區域「margin」：由外邊邊距限制，用空白區域擴展邊框區域，來分開相鄰的元素。

標準模型與IE模型的區別

標準模型指的是設置box-sizing爲content-box的盒子模型，通常width，height 指的是content的寬高。 而IE模型指的是box-sizing爲border-box的盒子模型。寬高的計算是content+padding+border；

邊距重疊與BFC

外邊重疊三種狀況：

• 相鄰元素之間

  

• 父元素與其第一個或最後一個字元素之間

  

• 空的塊級元素

BFC

BFC的定義：見MDNBFC

BFC的做用：

• 讓浮動內容與周圍內容等高 當浮動內容溢出容器的時候，建立容器的BFC，來包裹這個浮動。

• 外邊距蹦陷 當外邊距被合併時，建立各自的BFC，來解決問題 父元素與第一個元素上邊距合併，建立父元素與第一個元素的各自的BFC

  

其餘

包含塊的影響

當咱們設置元素的一些屬性，譬如：width、height、padding、margin、定位的偏移值「top，left」，經常受到起包含塊的影響。

誰是你的包含塊

• position 屬性爲static，relative 包含塊爲最近祖先塊元素。
• position 屬性爲absolute，包含塊爲不是static的祖先元素，這跟定位差很少。
• position 爲 fixed，包含塊就是 viewport，也就是整個屏幕大小

元素的width、padding、margin、定位的偏移值「top，left」百分比是根據包含塊的寬度計算

如何畫一個自適應寬高的正方形

div{
    width: 100%;
    padding-bottom: 100%;
}
複製代碼

由於padding跟width的計算是根據包含塊的寬度計算的，而height = content + padding 因此這樣能畫出一個正方形。

參考

佈局與包含塊

盒子模型

塊格式化上下文