盒模型

一、盒模型

盒模型主要有两种：标准盒模型和IE盒模型
标准盒模型：盒子的width和height设置的为盒子内容的宽高
IE盒模型：盒子的width和height设置的为盒子内容的宽高+padding+border

1、边框

宽度 样式 颜色

2、内边距

padding:上 右 下 左
padding设置百分比：相对于父元素的宽度

---

Note:

对于内联元素（非置换元素）:
设置左右内边距有影响;
设置上下内边距对内容没有影响（其他内容仍可占据内边距的位置），但是对于边框和背景有影响。

3、外边距

margin:上 右 下 左
外边距叠加：垂直的外边距会叠加

---

Note:

对于内联元素（非置换元素）:
设置左右外边距有影响;
设置上下外边距不起作用。

二、盒子的大小

对于标准盒模型：

1、块级元素&&宽度

设置了盒子的宽度，增加内边距和边框会使总宽度增加，内容区宽度不变（因为宽度设置的就是内容区的宽度）
没有设置盒子的宽度，增加内边距盒边框，总宽度不变（块级元素），内容区宽度减少。

2、块级元素&&高度

设置高度，总高度增加。
不设置高度，适应内容区，也相当于有高度，总高度增加。

3、内联元素&&宽度

对于非置换元素（对于置换元素来讲，具有块级元素的特征，以下讨论的内联元素均为非置换元素）：设置宽度，无效。
不设置宽度，宽度适应内容区，相当于有宽度，总宽度增加。

4、内联元素&&高度

对于非置换的内联元素内边距和外边距对于高度没有实际的影响，因此不讨论。