一、概念

• 标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长；

• 怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。

二、计算方法

标准盒子模型

• content(内容)+border(边框)+padding(内边距)

怪异盒子模型

• 怪异盒子模型=content(内容)(已经包含了 padding 和 border)

网页中所有元素都具备以下四个属性：(通常比喻成一个盒子)

• 内容(content)，也就是元素的 width、height
• 内边距(padding)
• 边框(border)
• 外边距(margin)

两种模式的转换（通过box-sizing）

box-sizing中比较常用的两个属性值为 content-box 和 border-box ，它可以改变盒子模型的解析计算模式，可以参考上面的代码案例。

• 当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
• 当设置box-sizing:border-box时，采用怪异模式进行计算