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

CSS盒狀模型簡介

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

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

CSS盒狀模型解釋

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

以下是代碼片段：

 
 
 
 

  
  
  
  
Article1:
  
  
  
  
Allhumanbeingsarebornfree 
  
  
  
  
andequalindignityandrights. 
  
  
  
  
Theyareendowedwithreasonandconscience 
  
  
  
  
andshouldacttowardsoneanotherina 
  
  
  
  
spiritofbrotherhood

  
  
  
  

 
 
 
 

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

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

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

網(wǎng)站欄目：CSS盒狀模型結(jié)構(gòu)及用法
瀏覽路徑：http://m.5511xx.com/article/djseogj.html