CSS 盒模型

在CSS中全部元素都被一個個盒子包圍，理解盒模型的基本原理是使用CSS實現準確佈局、處理元素排列的關鍵。

塊級盒和內聯盒

經過設置 display 來控制盒子外部顯示類型。 盒子內部顯示類型決定盒子內部元素如何佈局，默認狀況是正常流佈局。

最普遍應用的兩種盒：

• 塊級盒 block box：
  • 盒子在內聯方向上擴展並佔據父容器在該方向上的全部可用空間，在絕大多數狀況下意味着盒子和父容器同樣寬
  • 盒子之間會換行
  • width 和 heigth 生效
  • padding margin border 會將其餘元素從當前盒子周圍推開
• 內聯盒 inline box：
  • 不會換行
  • width height 不生效
  • padding margin border 生效可是不會推開其餘 inline box

什麼是盒模型

完整的盒模型應用於塊級盒子，內聯盒子只使用盒模型定義中的部份內容，模型定義了盒子的每一個部分：

• margin：顯示內容，大小經過width height設置
• border：包圍在內容外部的空白區域，大小經過padding設置
• padding：包裹內容和內邊距，大小經過border設置
• content：盒子和其餘元素之間的空白區域，大小經過margin設置

以下圖：

標準盒

在標準模型中，給盒子設置width height，實際設置的是content box

假設下面是一個盒子的樣式：

.box {
  width: 350px;
  height: 150px;
  margin: 25px;
  padding: 25px;
  border: 5px solid black;
}
複製代碼

使用標準模型的寬度 = 410（350+25+25+5+5） 也就是 width+padding+border

注: margin 不計入實際大小，固然，它會影響盒子在頁面所佔空間，可是影響的是盒子外部空間。盒子的範圍到邊框爲止，不會延伸到 margin。

替代（IE）盒模型

你可能會認爲盒子的大小還要加上邊框和內邊距，這樣很麻煩，並且你的想法是對的! 由於這個緣由，css還有一個替代盒模型。使用這個模型，全部寬度都是可見寬度，因此內容寬度是該寬度減去邊框和填充部分。

默認瀏覽器會使用標準模型。若是須要使用替代模型，您能夠經過爲其設置 box-sizing: border-box 來實現。 這樣就能夠告訴瀏覽器使用 border-box 來定義區域，從而設定您想要的大小。