盒子模型

盒子模型

---

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