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

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

一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響，因此掌握盒子模型需要從兩個方面來理解：一是理解單獨(dú)一個盒子的內(nèi)部結(jié)構(gòu)，二是理解多個盒子之間的相互關(guān)系。

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

下圖為一個CSS盒子模型的內(nèi)部結(jié)構(gòu)：

1.內(nèi)容區(qū)

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

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

當(dāng)內(nèi)容信息太多時，超出內(nèi)容區(qū)所占范圍時，可以使用overflow溢出屬性來指定處理方法。對于overflow這個屬性，我們在后面會詳細(xì)講解到。

2.內(nèi)邊距

內(nèi)邊距，指的是內(nèi)容區(qū)和邊框之間的空間，可以被看做是內(nèi)容區(qū)的背景區(qū)域。

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

3.邊框

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

邊框?qū)傩杂衎order-width、border-style、border-color以及綜合了3類屬性的快捷邊框?qū)傩詁order。

其中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個方向的簡潔內(nèi)邊距屬性margin。

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

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