盒子模型（就是这么简单）

一、盒子模型有哪些

• W3C盒子模型（标准盒子模型）
• iE盒子模型（怪异盒子模型）

二、W3C盒子模型（标准盒子模型）

标准模式下，一个块的宽度 = width+padding(内边距)+border(边框)+margin(外边距)；

W3C模型中：
　　　　　　CSS中的宽（width）=内容（content）的宽
　　　　　　CSS中的高（height）=内容（content）的高

三、iE盒子（怪异盒子模型）

怪异模式下，一个块的宽度 = width+margin(外边距)

IE模型中：
　　　　　　CSS中的宽（width）=内容（content）的宽+（border+padding）*2
　　　　　　CSS中的高（height）=内容（content）的高+（border+padding）*2 

四、区分和总结 

box-sizing:content-box; 将采用标准模式的盒子模型标准

box-sizing:border-box; 将采用怪异模式的盒子模型标准

虽说iE盒子是怪异盒子模型，但是我们在实际开发过程中主要还是使用怪异盒子模型，只有在少数情况下需要实现部分功能时才会使用标准盒子模型