DOM之width、height、left、top

这几个东西涉及到很多属性，而这些属性又有各种兼容性问题，我在这总结一下：

offset系列：

offsetParent：offset系列的核心。一个DOM元素的offsetParent一般是body，如果该元素的父容器定义过position:relative/absolute/fixed之一，offetParent就为它的父容器。详情请见：http://www.cftea.com/c/2009/01/4026MR6TVPE62NGS.asp

offsetWidth：对象的可见宽度，已经算上了滚动条的宽度（比如我们看到内容区+滚动条的宽度等于100px，这就是它的offsetWidth，而内容区=100px-滚动条宽度），会随窗口的显示大小改变。一般是css定义的width+padding+border（如果有滚动条，offsetWidth也不会变，只会减少width来容纳滚动条）

offsetHeight：对象的可见高度，包滚动条等边线，会随窗口的显示大小改变。一般是css定义的height+padding+border

offsetLeft：相对offsetParent，一般是从元素左边框的外侧到offsetParent左边框的内侧的距离（offsetParent.paddingLeft+el.marginLeft）

offsetTop：相对offsetParent，一般是从元素上边框的外侧到offsetParent上边框的内侧的距离(offsetParent.paddingTop+el.marginTop)[我测试IE6/7有问题，总之就是元素最外边到父元素最内边]

scroll系列：

scrollWidth：元素的实际内容的宽度，不包括border，会随元素中内容的多少改变（内容多了可能会改变元素的实际宽度）。一般是css定义的width+padding

scrollHeight：元素的实际内容的高度，不包括border，会随元素中内容的多少改变（内容多了可能会改变元素的实际高度）。一般是css定义的height+padding

scrollLeft：如果没有出现滚动条，一般是0。如果出现滚动条，一般等于向右滚的距离

scrollTop：如果没有出现滚动条，一般是0。如果出现滚动条，一般等于向下滚的距离

client系列：（不包含border和滚动条）

clientWidth：一般等于width+padding

clientHeight：一般等于height+padding

clientLeft：我测试的结果等于borderLeft

clientTop：我测试的结果等于borderTop