CSS盒模型

基本概念

盒模型由里向外是content，padding，border，margin

盒模型有两种：标准模型和IE模型

标准模型：盒模型的宽高是内容（content）的宽高

IE模型：盒模型的宽高是内容（content）+填充（padding）+边框（border）的总宽高

CSS如何设置两种模型

css3的属性box-sizing

标准模型  box-sizing：content-box

IE模型      box-sizing：border-box

JS获取盒模型的宽高

1、document.style.width/height

只能获取dom元素内联样式所设置的宽高

2、document.currentStyle.width/height

这种方式获取的是页面渲染完成后的结果，不管哪种方式设置的样式都能获取到，但是这种方式只有IE浏览器支持。

3、window.getComputedStyle(dom).width/height

这种方式和2是一样的，这个可以兼容更多的浏览器，通用性更好。

4、window.getBoundingClientRect().width/height

这种方式是根据元素在视窗中的绝对位置来获取宽高的

5、document.offsetWidth/offsetHeight

兼容性最好的，最常用的。