CSS盒模型包括：
content内容+padding内边距+border边框+margin外边距
1.标准模型和IE模型及其对比
- 标准/W3C盒子模型的范围包括
margin、border、padding、content，并且content不包含其他部分。
- IE盒子模型的范围也包括
margin、border、padding、content，不同于标准盒子的是，IE盒子的content包含了padding和border部分。
2.CSS如何设置标准模型和IE模型
通过以下语法
box-sizing:border-box || content-box || inherit- 当使用
content-box时：页面将采用标准模式来解析计算，content-box也是默认模式； - 当使用
border-box时，页面将采用IE模式解析计算； - 当使用
inherit时：页面将从父元素继承box-sizing的值。
3.JS设置获取盒模型对应的宽和高
对于CSS的三种添加方式：CSS内联样式，增加<style>节点，外联样式表。有以下方式：
-
dom.style.width/height：只能取出内联样式的宽度和高度，具体示例。 -
dom.currentStyle.width/height：获取即时计算的样式，是渲染后即时运行的结果，但是只有IE支持。 -
window.getComputedStyle(dom).width/height：也是获取即时计算的样式，支持其他浏览器如Chrome和Firefox，兼容性更好。 -
dom.getBoundingClientRect( ).width/height：计算盒模型在页面中的绝对位置，比较少用。
详细请参考这里。
