最后發(fā)現(xiàn)，鞏固基礎才是關鍵。

標準盒子模型

image

padding

可以設置四個值，如圖

padding: 1px 2px 3px 4px;

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

image

記住順時針轉就行。

• 如果padding不全，那么就和對面的padding一樣。

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

image

• 只規(guī)定一個，那么上下左右內邊距均為一致。

image

• 還可以單獨設置內邊距

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

  image

• 同時設置會怎么覆蓋呢

  這是css代碼的順序

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

image

可以清晰地看出，后面的覆蓋了前面的屬性

margin

和padding一樣，也可以設置四個值。不過表示的是外邊距。如圖

 margin: 1px 2px 3px 4px;

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

image

其他的都和padding一樣，也可以單獨設置各個方向的margin,如margin-top等，不贅述。

border

border:10px solid black;

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

image

也可以分開設置。

border-style: solid dashed dotted double;

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

content

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

image

• 由下圖可以看出：div大小

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