各种位置和长度

window.screen.width ,window.screen.height

屏幕宽/高度

window.screen.availWidth, window.screen.availHeight

屏幕宽/高度(空白空间)，拖拽任务栏可以看到各个值的变化

window.screen.availTop, window.screen.availLeft

返回窗口相对于屏幕的X/Y坐标,拖拽任务栏可以看到各个值的变化

window.screenTop, window.screenLeft

同上

window.pageXOffset，window.pageYOffset

获取页面文档滚动过的像素数。
但是ie6-8不支持此属性，ie9已经支持因此在ie6-8下需要用 window.document.documentElement.scrollLeft,window.document.documentElement.scrollTop或者window.document.body.scrollLeft,window.document.body.scrollTop来代替。
其中window.document.documentElement和window.document.body之间的差别表现在window.document.documentElement以Html的根节点html为基点，window.document.body则以body为基点，主要是为了兼容ie的各个版本。

window.innerWidth，window.innerHeight

设置或获取浏览器窗口文档显示区域的宽/高度，包括滚动条。

window.outerWidth，window.outerHeight

设置或获取浏览器窗口的外部宽度/高度，
F12 后，打开的内嵌的调试窗口也是计算在内的。

window.screenX，window.screenY

获取浏览器窗口左上角相对于屏幕左上角的x/y坐标。

clientWidth, clientHeight

clientWidth/Height = width/height + padding

offsetWidth，offsetHeight

offsetWidth/Height = width/height + border + padding

scrollWidth, scrollHeight

scrollWidth = padding + 内容高度
无滚动时，等于 clientWith/Height

offsetLeft, offsetTop

此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。

clientLeft和, clientTop

元素的内边距的外边缘和他的边框外边缘之间的水平距离和垂直距离，通常这些值就等于左边和上面的边框宽度

scrollLeft ,scrollTop

滚动的距离

left , top

绝对定位元素 (position: absolute 或者 position: fixed 的元素)，left/top属性指的是此元素的外边距顶边与此元素包含块的顶边之间的距离。
对于相对定位元素 (position: relative 的元素)，left/top属性指的是元素相对正常位置往下移动的距离。

最后上几张网络图：

引用：

令人头疼的clientTop、scrollTop、offsetTop
scrollTop、offsetHeight和offsetTop等属性用法详解
CSSOM视图模式(CSSOM View Module)相关整理