CSS盒模型

1、概念

盒模型组成由里到外：content、padding、border、margin
盒模型有两种标准：标准盒模型、IE盒模型


从上面两图可以看出，标准盒模型的宽高是content的宽高。
IE盒模型的宽高包括：content宽高+padding+border

2、CSS如何设置两种模型

使用css3的box-sizing属性：

/*设置为标准盒模型*/
box-sizing:content-box;

/*设置为IE盒模型*/
box-sizing:border-box;

3、js设置获取盒模型对应的宽高

1、dom.style.width/height 只能取到行内样式的宽和高，style标签中和link外链的样式取不到。

2、dom.currentStyle.width/height 取到的是最终渲染后的宽和高，只有IE支持此属性。

3、window.getComputedStyle(dom).width/height 同（2）但是多浏览器支持，IE9以上支持。

4、dom.getBoundingClientRect().width/height 也是得到渲染后的元素的宽和高，大多浏览器支持。

5.dom.offsetWidth/offsetHeight 也是得到渲染后的元素的宽和高，最常用的，也是兼容最好的。