[翻译]理解offsetWidth，clientWidth，scrollWidth以及Height

CSS盒模型是非常容易理解的，但当涉及到滚动的内容时，就变的复杂了。浏览器会使用你CSS中设置的值来绘制元素的盒模型，但如果只依赖于CSS中的属性值，当使用JavaScript确定元素的尺寸就不那么直观了。

所以为了计算方便，每个DOM元素都提供了6个属性：offsetWidth，offsetHeight，clientWidth，clientHeight，scrollWidth和scrollHeight。它们都是只读属性，表示了当前元素的布局属性，而且都是整数值。

offsetWidth/offsetHeight：元素的布局大小，是width/height、paddings、scrollbar（滚动条）和borders值的和。

clientWidth/clientHeight：元素的内部大小，包含padding但不包括scrollbar（滚动条）、边框和margin。

scrollWidth/scrollHeight：要素内容的大小，包含在当前视图中不可见的部分（由属性overflow引起）。它包含padding的值，但不包括margin。

来源：

http://stackoverflow.com/questions/21064101/understanding-offsetwidth-clientwidth-scrollwidth-and-height-respectively

https://developer.mozilla.org/en-US/docs/Web/API/Element.clientWidth