盒模型和 document.compatMode方法

盒模型

在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
1、如何使用标准盒模型

只要在文档首部加了doctype申明，即使用了标准盒模型，而不加，则会由浏览器自己决定，比如，ie 浏览器中显示“ie盒子模型”，在 ff 浏览器中显示“标准 w3c 盒子模型”。

当用编辑器新建一个html页面的时候最顶上都会有一个DOCTYPE标签，不定义DOCTYPE，会触发怪异模式

2、使用怪异盒模型

CSS3的box-sizing

box-sizing语法：
box-sizing: content-box || border-box || inherit || initial

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
当设置为box-sizing:border-box时，将采用怪异模式解析计算；

document.compatMode介绍

**用来判断当前浏览器采用的渲染方式，**即用的怪异盒模型还是标准盒模型。
IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的，在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样，但在Quirks Mode模式下则有很大差别，而在不声明Doctype的情况下，IE默认又是Quirks Mode。所以为兼容性考虑，我们可能需要获取当前的文档渲染方式。
document.compatMode正好派上用场

"BackCompat"：文档为怪异模式。
"CSS1Compat"：文档不是怪异模式，意味着文档处于标准模式。

当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth；
当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth。