精确获取元素样式值 - 盒模型
两个要点：
1. 盒模型的计算方式
2. 默认值的处理
计算方式
先说前提条件，即 doctype 是 <!doctype html>，也就是浏览器会按标准模式渲染网页，这样的话，所有浏览器的盒模型的计算方式都是：
可见宽度 = borderLeftWidth + paddingLeft + width + paddingRight + borderRightWidth;
可见高度 = borderTopWidth + paddingTop + height + paddingBottom + borderBottomWidth;
因为IE8+ 和其他非IE浏览器都支持 box-sizing，即可以指定盒模型的计算方式，默认值是 content-box，计算方式和上面一样。
还有一个值是 border-box，计算方式如下：
可见宽度 = width（即真正的width = 设置的width - border - padding）
可见高度= height
默认值
盒模型这几个属性取到的值不一定是数字，也可能是 auto、medium 之类的，这非常令人讨厌。非数值的情况大多是默认值，所以下面来看：
| IE678 | IE9+和非IE | |
| margin | auto | 0px |
| border | medium | 0px |
| padding | 0px | 0px |
| width/height | auto | 如100px |
可见 padding 最靠谱，所有浏览器表现一致。
最讨厌的是 border，IE居然默认是 medium，如果我们没设置过border，medium等同于0px；如果我们设置成 medium，警告一下，千万别在开发中用medium。
除此之外，border还有两个文本值：thin, thick。这三个值存在兼容性问题，如下：
| IE67 | IE8+和非IE | |
| thin | 2px | 1px |
| medium | 4px | 3px |
| thick | 6px | 5px |
这里我们不用去考虑手动设置成 medium 的情况，所以碰到 medium，直接转成0px，不用考虑别的，如果谁手动写了medium，您自己蛋疼去吧。况且 3px 只有三个字符，您写 medium 累不累啊
margin 给人的感觉是用于分隔两个盒模型，也就是说它本身并不是盒模型，只是盒模型的一个附属，暂且可以这么理解吧，毕竟真正想想，我们需要动态获取它干嘛？
压轴的是 width / height
在 IE 中碰到 auto 并不是没有办法了，而是要用到另一组属性： offsetWidth / offsetHeight
有人会问为什么不是 client 系列，刚才不是说 border 有那个不靠谱的值，直接上client系列就可以不用管border了嘛，但问题是，IE中如果值是 auto，clientWidth/Height 为 0，直接作废了。
width = offsetWidth - border - padding
height =offsetHeight - border - padding
