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

CSS盒狀模型簡(jiǎn)介

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

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

CSS盒狀模型解釋

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

以下是代碼片段：

 
 
 
 

  
  
  
  
Article1:
  
  
  
  
Allhumanbeingsarebornfree 
  
  
  
  
andequalindignityandrights. 
  
  
  
  
Theyareendowedwithreasonandconscience 
  
  
  
  
andshouldacttowardsoneanotherina 
  
  
  
  
spiritofbrotherhood

  
  
  
  

 
 
 
 

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

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

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

網(wǎng)頁(yè)標(biāo)題：CSS盒狀模型結(jié)構(gòu)及用法
當(dāng)前URL：http://fisionsoft.com.cn/article/djseogj.html