【CSS知多少-2】CSS盒的标准模型和IE模型对比和设置，盒子大小的获取

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：计算盒模型在页面中的绝对位置，比较少用。

详细请参考这里。