box-sizing与盒模型的认识

box-sizing属性：content-box（default），border-box。

content-box，border和padding不计算入width之内

border-box，border和padding计算入width之内，其实就是怪异模式了~

盒模型一共有两种模式，一种是标准模式（strict mode），另一种就是怪异模式（quirks mode）。

如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式。

对于拥有doctype声明的网页，什么浏览器采用何种模式解析，这里有一张详细列表可参考：http://hsivonen.iki.fi/doctype/

在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

标准模式盒模型

在怪异模式下的盒模型如下图所示，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

怪异模式盒模型

在js中document对象有个属性compatMode ,它有两个值：
BackCompat    对应quirks mode
CSS1Compat    对应strict mode