盒模型

（1）块级盒子（Block box）和内联盒子（Inline box）
一个被定义成块级的盒子会表现出一下行为：

• 盒子在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大多数情况下意味着盒子会和父容器一样宽
• 每个盒子都会换行
• width和height可以发挥作用
• 内边距，外边距和边框会将其它元素从当前盒子周围“推开”
  除非特殊指定，诸如标题（h1等）和段落（p）默认情况下都是块级的盒子。

如果一个盒子对外显示为inline，那么它有如下行为：

• 盒子不会产生换行
• width和height不起作用
• 垂直方向上的内边距、外边距以及边框会被应用但不会把其他处于inline状态的盒子推开。
• 水平方向上的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开。

（2）CSS盒模型
完整的css盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分（margin、border、padding和content），合在一起就可以创建我们页面上看到的内容。
1.盒模型的各个部分

• Content box：这个区域用来显示内容，大小可以通过width和height设置
• Padding box：包围在内容区域外部的空白区域；通过padding设置。
• Border box：边框盒包括内容和内边距。大小通过border相关属性设置。
• Margin box：最外面的区域，是盒子和其他元素之间的空白区域。大小通过margin相关属性设置。

2.标准盒模型
在标准模型中，如果你给盒子设置weight和height，实际设置的是content box。padding和border再加上设置的宽高一起决定整个盒子的大小。
height = contentHeight + padding + border; width = contentWidth + padding + border;

3.替代（IE）盒模型
IE盒模型中，所有宽度都是可见宽度，所以内容宽度是该宽度嫁娶边框和填充部分。
height = contentHeight; width = contentWidth;

(3)外边距、内边距和边框
1.外边距
外边距是盒子周围一圈看不到的空间，它会把其他元素从盒子旁边推开。外边距属性值可以为正也可以为负。设置负值会导致和其他内容重叠。
外边距为正时推开周围元素，为负时收缩空间。

注意：

• padding不能设置为负值，margin设置为负值会压缩当前盒子。