offsetWidth、clientWidth、scrollWidth、scrollTop

1. 基本概念

height/width

height：指元素内容的高度  ，jQuery中的height()方法返回的就是这个高度。

offsetWidth/offsetHeight

对象的可见宽度，包含滚动条和border。非标准属性，但各浏览器都支持

offsetHeight：内容高度+padding高度+边框宽度  ，jQuery中的outerHeight()方法返回的就是这个高度。

clientWidth/clientHeight

对象的可见宽度，不包含滚动条和border。

clientHeight：内容高度+padding高度  ，jQuery中的innerHeight()方法返回的就是这个高度。

scrollWidth/scrollHeight（慎用）

元素完整的高度和宽度，overflow:hidden的部分也计算在内。

offsetLeft/offsetTop

当前元素距浏览器边界的偏移量，以像素为单位。

clientTop/clientLeft

这个属性测试下来的结果是=border。

scrollLeft/scrollTop（IE6计算方式不同）

设置或返回已经滚动到元素的左边界或上边界的像素数。

2. 比较offsetHeight/clientHeight/scrollHeight

共同点：3个值都和元素的margin无关。
差 异：offsetHeight = height+padding+border
      clientHeight = height+padding-滚动条的宽度(如果有滚动条)
      scrollHeight 获得的是元素的实际宽度影藏的部分也计算在内
备 注：1.Jquery中的css("height")/height()不计算padding/border/滚动条。
      2.offsetWidth、clientWidth、scrollWidth同理。 

Jquery也提供了三种相关的宽度和高度。

Height", "Width"是元素的content的宽度和高度。

innerHeigh, innerWidth是 在元素的内容之上加上padding。其实就是clientHeight,clientWidth。

outerHeigh、outerWidth是在元素的内容上加上padding、border、margin。

3. 比较offsetTop/clientTop/scrollTop

offsetTop：元素相对body的Top值（元素border以外到body.padding以内）
clientTop = offsetTop-(height+padding)=border
scrollTop：元素的滚动值 （可用来做滚动效果）