盒子模型（分为标准盒子模型和IE盒子模型）

标准盒子模型

• 元素的 width、height 只包含内容 content，不包含 border 和 padding 值；

• 盒子的大小由元素的宽高、边框和内边距决定

IE盒子模型

box-sizing: border-box;   /* 较 box_1 新增加的属性 */

• 元素的大小，由元素的 width、height、padding、border三者共同决定：

元素的width\height = width\height - padding - border

在 .box_2 的效果图中，我们可以看到盒子的大小等于元素的 width、height 值。在 IE 盒模型中，border 和padding 的空间会挤压 content 的空间，使得元素的内容宽高小于 width、height 设置的值（100px）。

• 盒子的大小由元素的 width、height 直接决定

• 修改 border 和 padding 值不能改变盒子的大小，但会影响元素的大小