基础学的不扎实，关于高度宽度的各个属性总是糊里糊涂的，在这里理一下思路。
下面的测试以以下html结构为例
<div id="div1" style="height:200px;width:200px;padding:20px;margin:10px;border:1px solid #000;overflow:scroll">
<div id="div2" style="height:1000px;width:1000px;padding:20px;margin:10px;border:1px solid #000;">
</div>
</div>
height
height属性有点特殊，只能获取写在内联样式中的高度值，并且返回的是一个字符串。
height属性还有另外一个特殊的地方。它是style下的一个属性，所以在使用的时候应该是obj.style.height或者document.body.height这样来使用。
height属性获取的是纯粹的高度值，不包括边框，内外填充。
#div1返回结果为200px
#div2返回结果为1000px
clientheight
clientHeight返回的是数字。
结果包含元素的高度+内填充(padding)。
如果该元素出现了横向的滚动条(滚动条的宽/高度一般为17px)，则要减去滚动条的高度。
#div1返回结果为 200 + 20 *2 -17 =223
#div2返回结果为 1000 + 20*2 =1040
document.body.clientHeight || document.documentElement.clientHeight 。这样可以获取浏览器可视区域的高度，不包括浏览器的工具栏地址栏。
offsetHeight
offsetHeight返回的是数字。
结果包括元素的高度+内填充(padding)+边框(border)。
结果与是否出现滚动条无关。
#div1返回的结果为 200 + 20*2 + 1*2 = 242
#div2返回的结果为 1000 + 20*2 + 1*2 =1042
document.body.offsetHeight || document.documentElement.offsetHeight 。这样可以获取整个页面文档的高度。
scrollHeight
scrollHeight返回的是数字。
简单来说返回的是选定元素作为容器，内部能滚动的总高度。
#div1返回的结果为 1000(#div2的高度) + 20*2(#div2的内填充) + 1*2(#div2的边框) + 10*2(#div2的外填充) + 20*2(#div1的内填充) = 1102 ！！！【这是chrome下的计算结果】
1000(#div2的高度) + 20*2(#div2的内填充) + 1*2(#div2的边框) + 10*2(#div2的外填充) + 20(#div1的内填充，测试发现只取了一半的内填充，目前没搞明白怎么回事) = 1082 ！！！【火狐与ie下的计算结果】
#div2返回的结果为 1000(自身高度) + 20*2(自身的内填充) = 1040 ！！！【该值浏览器之间没有差异】
document.body.scrollHeight || document.documentElement.scrollHeight 。这样可以获取整个页面文档的可滚动高度。
scrollTop
scrollTop返回的是数字。
滚动条距离顶部的距离。
整理暂时先到这里。
width、offsetWidth、clientHeight、scrollWidth、scrollLeft对应上方高度的取值方式。
最后附上一张表。以上整理如果有错误，欢迎指正。
