js 获取盒模型宽高的几种方法

盒模型

1. 标准模型
2. IE模型

两种模型都包括（从外向里）margin、border、padding、content
不同的是：较width、height而言，1 只包括content内容，而2则包括border、padding；
如何设置两种模型呢？

1: box-sizing: content-box
2: box-sizing: border-box

以上内容与标题无任何关系，纯粹巴拉巴拉几句。。。

js 获取盒模型宽高的几种方法:

设置dom元素的宽高样式 一般有三种方法：

1. 内联样式
2. style标签
3. 通过link标签引入

获取方法有如下4个

1. dom.style.width/height

只试用于1 内联样式的获取

2. dom.currentStyle.width/height

拿到的是123中渲染以后的样式，是比较准确的，但是有兼容性只有ie支持

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

兼容性更好，可以拿到123的样式

4. dom.getBoundingClientRect().width/height/top/left

拿到的是123中渲染以后的样式,还可以计算元素的绝对位置(距离视口viewport左顶点的距离)