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

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

标准盒子模型的内容计算：content=width*height，

盒子的总宽度=width+padding（左右）+margin（左右）+border（左右）总宽度等于所有附加值，偏移值的总和；

怪异盒子模型的内容计算：content=width*height-padding-border

盒子的总宽度=width+margin（左右）此时的width宽度已经包含了padding和border的值；

在编辑html文档时，只要在顶部声明了DOCTYPE，默认都会使用标准盒子模型。如果没有进行声明，则会根据浏览器类型自行调整；

在CSS中对相应的div盒子进行box-sizing属性的设置，就可以让盒模型在标准和怪异中进行转换。

box-sizing:content-box; 盒模型设置为w3c标准盒子模型

box-sizing:border-box; 盒模型设置为怪异（IE）盒子模型

box-sizing 是个很新的属性，目前你还应该像我上面例子中那样使用 -webkit- 和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+的。

使用标准盒子模型时，盒子的宽高不会因为第一次的设定而持久不变，还可以通过padding值的设定来进行二次放大；

使用怪异盒子模型时，宽高在第一次设定时就已经固定，不会因为后期padding值的设定而放大，只会相对应的调整内容的位置。

在实际开发中，怪异盒子模型能够在不影响基础布局的情况下，调整内容的位置，大小，是一个很值得一用的属性。