盒子模型（box model），也可以叫框模型，是網頁布局的基礎，每個HTML元素都被表示為一個矩形盒子，盒子包含了它的内容（content）、内邊距（padding）、邊框（border）和外邊距（margin），每部分都可以用一個或多個CSS屬性來指定其大小、顔色等，可以參考下圖：
1.内容盒子（content-box）由width和height來表示内容的寬度和高度，主要用來存放盒子的内容，包括文本以及其他嵌套子元素的盒子。除此之外，還有min-width、max-width、min-height和max-height可以用來設定盒子的最大/最小寬度和高度值。
2.padding，表示盒子的内邊距，它表示從邊界到content-box之間的空間，padding屬性可以設定盒子四條邊，同時還提供了padding-top、padding-right、padding-bottom和padding-left分别設定盒子各個方向的内邊距。
3.border，表示盒子的邊框，它分割了内邊距和外邊距，邊框厚度預設為0（即不可見），但可以通過border簡寫屬性來設定邊框厚度、樣式和顔色，例如border:1px solid blue;可以設定厚度為1像素的藍色實體邊框。
同樣地，border有可以通過border-top、border-right、border-bottom和border-left來設定各條邊的樣式。
4.margin，表示盒子的外邊距，就是盒子邊框往外的區域，一般用外邊距設定來與其他元素保持一定距離，類似padding，margin是簡寫屬性，它還提供了padding-top、padding-right、padding-bottom和padding-left分别設定各方向的外邊距。
特殊地，當兩個盒子的接觸在一起時，它們的間距合并為兩者中最大的外邊距的距離，而不是兩者外邊距的總和，這種特性叫外邊距塌陷（margin-collapsing）。
除了上面這些屬性外，還有其他的一些可以控制盒子顯示内容的屬性，例如：
overflow
這個屬性用來控制當盒子裝不住所有内容時的表現，分别可以設定以下三個值：
auto：當内容過多，溢流的内容被隐藏，然後出現滾動條來讓我們滾動檢視所有的内容。
hidden：當内容過多，溢流的内容被隐藏。
visible（預設值）：當内容過多，溢流的内容被顯示在盒子的外邊。
background-clip
這個屬性用來裁剪盒子的背景内容，分别可以設定以下三個值：
border-box（預設）：背景内容顯示到邊框。
padding-box：背景内容顯示到内邊距。
content-box：背景顯示到内容盒子内。
CSS盒子類型
CSS中盒子類型有很多種，常見有三種：塊級盒子（block box）、行内盒子（inline box）和行内塊級盒子（inline-block box），它可以使用display屬性來設定。HTML中的塊級元素預設display為block，行内元素預設display為inline。
下面分别說明幾種盒子類型的特點：
block
- 獨占一行（前後自動換行）
- 寬度是其父元素的100%
- 高度是其（最大）内容的高度
- 可設定寬高
- 可包含其他的塊盒子或行内盒子
inline
- 與其他行内盒子并行在一行
- 寬高與其内容的寬高一緻
- 不能設定寬高
- 不可包含其他盒子
inline-block
它是上面兩者的結合體：
- 不會獨占一行，會與其他行内盒子一起随文字流動
- 可以設定寬高
- 像塊級盒子（block box）一樣保持完整性，不會像行内盒子那樣會被拆開兩行，但若單獨一行都沒有足夠的空間存放它會斷開多層，失去一個盒子的形狀
盒子模型的變換
預設情況下，盒子的總寬度=width+padding-left+padding-right+border-left+border-right，但是這樣的話有時候會不友善，例如現在我有一個保持總寬度為容器一半（50%）的盒子，同時它又有一定寬度的邊界和内邊距，那麼我還要去計算它的content-box的寬度進而去設定width（如果我之類邊界和内邊距改變，這個width又要修改了），是以能不能有一種友善的方法來設定盒子的總寬度呢？沒錯，就是box-sizing屬性，将它設定為border-box即可，這樣設定後盒子模型變成下面這樣：
這時候盒子總寬度=width，包含了原來content-box的width、 padding和border的寬度，這樣無論邊界和内邊距怎麼改變，去設定width值就比較友善了。