整个浏览器
文档坐标：
不会随浏览器滚动而变化
- css指定元素位置时，文档坐标
视口坐标：
随浏览器滚动而变化
- 查询元素的位置，视口坐标
- 事件处理中的鼠标坐标，视口坐标
pageX和pageY
浏览器窗口滚动条的位置
pageXOffset
pageYOffset
除ie8及以下scrollLeft和scollTop 适用于所有浏览器
e.g.
查询窗口滚动条的位置
查询窗口的视口尺寸 clientWidth和clientHeight
查询窗口的视口尺寸
单个元素
查询一个元素视口的位置
getBoundingClientRect()
它不需要参数，返回一个包含left、right、top、bottom属性的对象
除IE浏览器外还包含 width和height属性
- 计算元素的文档位置
计算元素的文档位置
- 计算元素的width和height
计算元素的width和height
注getBoundingClientRect()返回元素的坐标包含border和padding,但不包含margin
getClientRects()
针对内联元素，可能占有多行，返回一个对象数组
注getBoundingClientRect()和getClientRects()返回的是静态快照，当视口改变时，不会实时更新
滚动浏览器 scrollTo
scrollTo
offsetLeft、offsetTop
相对父元素
e.g. 计算出该元素的文档位置
offsetLeft、offsetTop
元素的offset，client，scroll
概览
clientWidth和clientHeight
1.指的是padding和content
2.(pading和comtent)之前有滚动条,不包含滚动条
3.i,span内联元素该值返回0
offsetWidth和offsetHeight
1.指的是 border,padding和content
scrollWidth和srollHeight
1.指的是padding和content,和任何溢出的内容的尺寸
2.若没有溢出的内容的尺寸，和clientWidth和clientHeigh相等
clientLeft和clientTop
1.通常指的是border,若滚动条在左侧，还包含滚动条的宽度
2.内联元素指为0
offLeft和offTop
1.指的是相对于父元素的x,y坐标
scrollLeft和scrollTop
1.查询滚动条的位置
2.或指定滚动条的位置
3.或使用scrollTo
参考指南：
js权威指南 15章
