标准盒模型和怪异盒模型

1. 标准盒模型

width：代表内容区域的宽度；

height：代表内容区域的高度；

盒子总宽：width + 内边距 + 边框 + 外边距；

2. 怪异盒模型

width：代表的是 内容区宽度 + 内边距 + 边框；

height：代表 内容区高度 + 内边距 + 边框；

盒子总宽：width + 外边距；

3. box-sizing 属性

通过这个属性，可以规定盒子是以标准盒模型还是怪异盒模型（IE盒模型）来渲染。

box-sizing:content-box|border-box;

content-box：默认值，以标准盒模型模式去解析计算；

border-box：以怪异盒模型去解析计算。