盒模型

在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。

盒子模型分为标准盒模型和怪异盒模型

标准盒模型：总宽度：内容 ( content ) + border + padding + margin

　　　　　　box-sizing ：content-box

IE盒模型(怪异盒模型)：宽度 = 内容宽度 ( content + border + padding ) + margin

　　　　　　box-sizing: border-box;

 

区别：
　　在标准盒模型中 ：width是内容宽度 ，元素真正的宽度 = content + border + padding;
　　在怪异盒模型中 ：width则是元素的实际宽度 ，内容宽度 = width - ( padding + border)