在HTML中我們了解了重要的理論“塊元素和行內元素”，本文我們將接觸CSS中一個極其重要的理論，那就是“CSS盒子模型”理論。

在“CSS盒子模型”理論中，所有頁面中的元素都可以看成一個盒子，并且占據著一定的頁面空間。

一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨一個盒子的內部結構，二是理解多個盒子之間的相互關系。

每個元素都看成一個盒子，盒子模型是由content（內容）、padding（內邊距）、margin（外邊距）和border（邊框）這四個屬性組成的。此外，在盒子模型中，還有寬度width和高度height兩大輔助性屬性。

下圖為一個CSS盒子模型的內部結構：

1.內容區

內容區是CSS盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型。內容區是盒子模型必備的組成部分，其他的3部分都是可選的。

內容區有3個屬性：width、height和overflow。使用width和height屬性可以指定盒子內容區的高度和寬度。在這里注意一點，width和height這兩個屬性是針對內容區而言，并不包括padding部分。

當內容信息太多時，超出內容區所占范圍時，可以使用overflow溢出屬性來指定處理方法。對于overflow這個屬性，我們在后面會詳細講解到。

2.內邊距

內邊距，指的是內容區和邊框之間的空間，可以被看做是內容區的背景區域。

關于內邊距的屬性有5種，即padding-top、padding-bottom、padding-left、padding-right以及綜合了以上4個方向的簡潔內邊距屬性padding。使用這5種屬性可以指定內容區域各方向邊框之間的距離

3.邊框

在CSS盒子模型中，邊框跟我們之前學過的邊框是一樣的。

邊框屬性有border-width、border-style、border-color以及綜合了3類屬性的快捷邊框屬性border。

其中border-width指定邊框的寬度，border-style指定邊框類型，border-color指定邊框的顏色。

“border-width:1px;border-style:solid;border-color:gray;”等價于“border:1px solid gray;”。

4.外邊距

外邊距，指的是兩個盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。

外邊距使得元素之間不必緊湊地連接在一起，是CSS布局的一個重要手段。

外邊距的屬性也有5種，即margin-top、margin-bottom、margin-left、margin-right以及綜合了以上4個方向的簡潔內邊距屬性margin。

同時，CSS允許給外邊距屬性指定負數值，當指定負外邊距值時，整個盒子將向指定負值的相反方向移動，以此可以產生盒子的重疊效果。這就是傳說中的“負margin技術”，我們將會在“CSS進階教程”中給讀者詳細講解這一個高大上的技術喔。

內容區、內邊距、邊框、外邊距這幾個概念可能比較抽象，對于初學者來說，一時半會還沒辦法全部理解。不過沒關系，待我們看完本站的CSS教程之后再回顧這些概念就變得很簡單了。