盒子模型

盒子模型

---

padding

能夠設置四個值，如圖

padding: 1px 2px 3px 4px;

表示內邊距，內容與盒子上右下左的距離。

記住順時針轉就行。

• 若是padding不全，那麼就和對面的padding同樣。

  如圖，只規定了兩個，可是在下面的盒子模型中默認使得對面的padding屬性一致。

• 只規定一個，那麼上下左右內邊距均爲一致。

• 還能夠單獨設置內邊距

  padding-left: 1px;
   padding-right: 2px;
   padding-top: 3px;
   padding-bottom: 4px;

• 同時設置會怎麼覆蓋呢

  這是css代碼的順序

  padding-left: 5px;
  padding-right: 6px;
  padding: 1px 2px 3px 4px;
  padding-top: 7px;
  padding-bottom: 8px;

  能夠清晰地看出， 後面的覆蓋了前面的屬性

---

margin

和padding同樣，也能夠設置四個值。不過表示的是外邊距。如圖

margin: 1px 2px 3px 4px;

一樣，四個值表示上右下左外邊距，順時針

其餘的都和padding同樣，也能夠單獨設置各個方向的margin,如margin-top等，不贅述。

---

border

border:10px solid black;

三個參數值，表示邊框的粗細，線條樣式，顏色

也能夠分開設置。

border-style: solid dashed dotted double;

上面將盒子四周的border樣式設置不一樣。

---

content

圖中的100*100的空間就是content。也便是咱們在css中設置的width和height大小

• 由下圖能夠看出：div大小

  • 水平空間大小 = border(左右) + padding(左右) + width
  • 垂直空間大小 = border(上下) + padding(上下) + height