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

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

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

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

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

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

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

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

當(dāng)內(nèi)容信息太多時(shí)，超出內(nèi)容區(qū)所占范圍時(shí)，可以使用overflow溢出屬性來(lái)指定處理方法。對(duì)于overflow這個(gè)屬性，我們?cè)诤竺鏁?huì)詳細(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個(gè)方向的簡(jiǎn)潔內(nèi)邊距屬性padding。使用這5種屬性可以指定內(nèi)容區(qū)域各方向邊框之間的距離

3.邊框

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

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

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

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

4.外邊距

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

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

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

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

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