再也不会分不清楚offsetheight clientheight scrollheight offsettop clienttop scrollheight

首先来讲解offsetHeight  和scrollHeight 

offsetHeight= border+padding+内容（也就是height  200） 则offsetHeight= 10（border-bottom）+10(padding-bottom)+200(height)+10(padding-top)+10(border-top)=240px;

clientHeight=padding+内容  ,则clientHeight=10(padding-bottom)+200(height)+10(padding-top)=220px;

scrollHeight:这个我一句话概括，当不出现滚动条时（即里面包裹的内容没有溢出时），就等于clientHeight；当里面包括的内容溢出时，就等于里面包裹容器的margin+padding+border+内容高度+外层容器的padding

而在jQuery中也有各种高度这里也来总结一下

outerHeight();  当没有传参数时等于  offsetHeight  为240px  

outerheight(true)  时，就要把margin也要算进去   则为440px

innerheight()   就等于clientHeight   为220px;

height  就只包含内容高度  为200px

接下来讲解一下clientTop   offsetTop  scrollTop

offsetTop   就是容器顶部到到父元素顶部的距离（直接见图吧）当然这里容器的父元素为body，如果父元素为一个div，要想相对于这个div，此时父元素必须加上一个定位，此时offsetTop才会指向父元素。

clientTop:这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0. 

scrollTop:如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.对于不可以滚动的元素,这些值总是0.

box1.scrollTop=50   此时为50px,是指所包含的文档内容下拉了50px

这是另外一篇讲的比较好的http://www.cnblogs.com/trlanfeng/archive/2012/11/04/2753280.html

以上结果均在谷歌浏览器上测试，关于scrollHeight，我不能用更准确的方式来解释，希望大家找到更好的解释一起分享