本節(jié)和大家重點(diǎn)學(xué)習(xí)一下CSS盒狀模型，它其實(shí)就是用于描述一個(gè)為HTML元素形成的矩形盒子，CSS盒狀模型還涉及為各個(gè)元素調(diào)整外邊距（margin）、邊框（border）、內(nèi)邊距（padding）和內(nèi)容的具體操作。

CSS盒狀模型簡介

CSS中的盒狀模型（boxmodel）用于描述一個(gè)為HTML元素形成的矩形盒子。CSS盒狀模型還涉及為各個(gè)元素調(diào)整外邊距（margin）、邊框（border）、內(nèi)邊距（padding）和內(nèi)容的具體操作。

下圖顯示了CSS盒狀模型的結(jié)構(gòu)：

CSS盒狀模型解釋

上面的圖示看上去可能感覺有點(diǎn)理論化，好吧，讓我們試著用一個(gè)實(shí)例來解釋CSS盒狀模型。在我們的例子中，有一個(gè)標(biāo)題和一些文本。該例的HTML代碼如下：

以下是代碼片段：

<h1>Article1:</h1> 
<p>Allhumanbeingsarebornfree  
andequalindignityandrights.  
Theyareendowedwithreasonandconscience  
andshouldacttowardsoneanotherina  
spiritofbrotherhood</p> 
 

通過添加一些顏色及字體信息，該例可以有以下顯示效果：

這個(gè)例子包含了兩個(gè)元素：h1和p。這兩個(gè)元素的CSS盒狀模型如下圖所示：

盡管上圖顯得有點(diǎn)復(fù)雜，不過它展示了每個(gè)HTML元素是如何被盒子所圍繞的。我們可以通過CSS來調(diào)整這些盒子。

【編輯推薦】

1. CSS解決DIV居中相關(guān)問題
2. 五大CSS3新技術(shù)用法指導(dǎo)
3. CSS中border和clear兩大屬性用法揭秘
4. 實(shí)例解析CSS DIV絕對定位與固定定位用法
5. 解讀DIV CSS網(wǎng)頁布局中CSS無效十個(gè)原因