CSS盒模型

• 1. IE盒子模型（又称： 怪异盒子模型）
• 2. W3C标准盒模型（又称： 标准盒模型）

标准盒子模型( box-sizing: content-box )

• 计算盒子宽（盒子在界面上占据的实际显示区域宽度）： width(content: 代码中设置的盒子宽度) + padding(左右内边距) + border(左右边框)

• 计算盒子高（盒子在界面上占据的实际显示区域高度）： width(content: 代码中设置的盒子高度) + padding(上下内边距) + border(上下边框)

怪异盒模型( box-sizing: border-box )

• 计算盒子宽（盒子在界面上占据的实际显示区域宽度）： width(content + padding + border) => width为代码中设置的盒子宽度

• 计算盒子高（盒子在界面上占据的实际显示区域高度）： height(content + padding + border) => height为代码中设置的盒子高度