盒子模型

盒子模型的示意图：（它包括content，padding，border，margin）

盒子模型总共有两种：W3C标准盒模型和IE盒模型（怪异盒模型）
这两个盒子模型的区别在于它们宽高的计算方式不同

常见的块盒：容器元素，h1~h6，p，hr，p，pre，table，ul，ol...
常见的行盒：span，a，img，video，b，input，label，strong，i...

W3C标准盒模型

标准盒模型计算元素的宽高是只算content的宽高

利用css3的box-sizing：content-box可设置标准盒模型（box-sizing的默认值是content-box）

IE盒模型

IE盒模型又称怪异盒模型
怪异盒模型计算元素的宽高是content+padding+border的宽高

利用css3的box-sizing：border-box可设置怪异盒模型

JS获取盒模型的宽高

设置盒模型元素的宽高有三种方式：内联样式，style标签，通过link标签引入

1. 只能获取内联样式设置的宽高
dom.style.width/height

2. 获取元素渲染后即时的宽高(上面的三种方式都能获取到)，值准确（但只支持IE）
dom.currentStyle.width/height

3. 获取元素渲染后即时的宽高(上面的三种方式都能获取到)，值准确（兼容性更好）
getComputedStyle(dom).width/height

4. 获取到元素的宽高(包括content+padding+border)，left和top值（只读）
dom.offsetwidth/offsetheight/offsetleft/offsettop

5. 获取元素渲染后即时的宽高(上面的三种方式都能获取到)，值准确（兼容性更好），除此之外还能获取到元素的绝对位置（top，bottom，left，right）
dom.getBoundingClientRect().width/height/top/left/bottom/right
注意IE的一些兼容：在IE7及IE7以下left和top会多出两个像素，IE9以上支持width/height属性
获取到的绝对位置都是相当于视口的左上角