盒子模型讲解

1.CSS盒子模型：

css盒子模型本质上是一个盒子，他包括外边距（margin）、边框（border）、内边距（padding）以及实际内容（content）四个属性。
下图直观的展示了盒子模型的构成：

---

2.css盒模型和IE盒模型的区别：

在标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。

---

3.特别注意：

1.如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减掉width。
2.padding区域也是有颜色的
padding就是内边距。padding的区域有背景颜色，也就是说，background-color将填充所有border以内的区域。
3.padding有四个方向，如果padding有四个值，那么对应顺序是上、右、下、左；如果是三个值，对应的方向是上、左右、下；如果是两个值，对应的方向为上下、左右。

---