html中易混淆的offset、client、scroll

上来不说话，先抛出几个问题：
offsetWidth offsetHeight offsetLeft offsetTop
clientWidth clientHeight clientLeft clientTop
scrollWidth scrollHeight scrollLeft scrollTop
是时候谈谈它们之间的区别了，是不是已经混乱了？好吧，一步一步来搞清楚这些东西是啥。
终于下决心来补上这个坑，俗话说的话：纸上得来终觉浅，绝知此事要躬行。要搞清这几个容易混淆的概念，我的建议是运行文章中的例子。

offset
offsetWidth & offsetHeight
任何HTML元素的只读属性offsetWidth和offsetHeight已CSS像素返回它的屏幕尺寸，返回的尺寸包干元素的边框和内边距（width/height + border + padding），和滚动条。
offsetLeft & offsetTop
所有HTML元素拥有offsetLeft和offsetTop属性来返回元素的X和Y坐标
相对于已定位元素的后代元素和一些其他元素（表格单元），这些属性返回的坐标是相对于祖先元素
一般元素，则是相对于文档，返回的是文档坐标
offsetParent属性指定这些属性所相对的父元素，如果offsetParent为null，则这些属性都是文档坐标
//用offsetLeft和offsetTop来计算e的位置
function getElementPosition(e){
var x = 0,y = 0;
while(e != null) {
x += e.offsetLeft;
y += e.offsetTop;
e = e.offsetParent;
}
return {
x : x,
y : y
};
}

client
client是一种间接指代，它就是web浏览器客户端，专指它定义的窗口或视口。
clientWidth & clientHeight
clientWidth和clientHeight类似于offsetWidth和offsetHeight，不同的是不包含边框大小（width/height + padding）。同时在有滚动条的情况下，clientWidth和clientHeight在其返回值中也不包含滚动条。
对于类似