1. 盒模型定义及分类

当你对一个文档进行布局(laying out)时候, 浏览器引擎会根据CSS-Box模型将所有元素描述为一个盒子, CSS会决定这些盒子的大小, 位置, 属性(颜色, 边框...)。

盒模型有以下分类：

• 标准定义：
  • 标准盒模型
  • 怪异模式盒模型
• 元素类型
  • 块级盒子
  • 内联盒子
  • 行内块

2. 标准定义划分

1. 标准盒子模型

宽度width = 内容宽度(content) + padding + border + margin

内容宽度仅仅只有content。如果设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。

2. 怪异模式盒子模型

宽度width = 内容宽度(content + padding + border) + margin

内容宽度包含了content、border、padding。如果将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

普通文档流块元素的CSS外边距合并问题

只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

3. box-sizing属性

box-sizing属性有以下两个属性值。

1. content-box

默认值，使用标准盒子模型。

.contentBox {
    box-sizing: content-box;
    width: 350px;
    border: 10px solid black;
    padding: 0 10px;
}

以上代码在浏览器中的渲染的实际宽度是390px。

2. border-box

使用怪异模式盒子模型。

.borderBox {
    box-sizing: border-box;
    width: 350px;
    border: 10px solid black;
    padding: 0 10px;
}

以上代码在浏览器中的渲染的实际宽度就是350px。

3. 元素类型划分

1. 块级盒子

一个被定义成块级的（block）盒子会表现出以下行为：

• 盒子可以占据父容器的所有可用空间
• 每个盒子都会换行
• width和height属性可以发挥作用
• 默认情况下h1-h6、p、div、section都处于block状态

2. 内联盒子

一个被定义成内联的（inline）盒子会表现出以下行为：

• 盒子不会产生换行
• width和height属性将不起作用
• 默认情况下用做链接的a元素、span、em以及strong都处于inline状态

3. 特殊的行内块

如果不希望一个项切换到新行，但希望它可以设定宽度和高度，此时我们可以将该元素设置为inline-block。

4. 元素类型切换

	display属性值
块级盒子	block
内联盒子	inline
行内块	inline-block

4. 盒模型属性设置

1. margin和padding

• 1个值：四个方向
• 2个值：上下、左右
• 3个值：上、左右、下
• 4个值：上、右、下、左