css盒子模型

標籤：

區塊層級元素都具備盒子模型，盒子模型有padding（top、left、right、bottom內容到盒子的距離）和margin（top、left、right、bottom盒子之間的距離）屬性。

 

盒模型--邊框（一）

 

• 盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設定它的粗細、樣式和顏色(邊框三個屬性)。p{ border-width:2px; border-style:solid; border-color:red; }縮寫是p{border:2px solid red;}

  注意：

  1、border-style（邊框樣式）常見樣式有：

  dashed（虛線）| dotted（點線）| solid（實線）。

  
  2、border-color（邊框顏色）中的顏色可設定為十六進位顏色，如:

  border-color:#888;//前面的井號不要忘掉。

  
  3、border-width（邊框寬度）中的寬度也可以設定為：

  thin | medium | thick（但不是很常用），最常還是用象素（px）

 

盒模型--邊框（二）

• css 樣式中允許只為一個方向的邊框設定樣式：div{border-bottom:1px solid red;border-top:1px solid red; border-right:1px solid red; border-left:1px solid red;}

盒模型--寬度和高度

• css內定義的寬（width）和高（height），指的是填充以裡的內容約制。一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界,如所示：

盒模型--填充（padding和margin邊界）

• padding和margin的區別，padding在邊框裡，margin在邊框外。

 

 

 

　　

 

css盒子模型