DOM各种距离傻傻分不清？看这篇文章就够了

1、offsetX，Y 	鼠标相对于“触发事件的元素”的位置，从内容区域左上角开始定位，不是从border左上角开始！

2、offsetWidth，Height	获取元素的宽度和高度，包含内边距和边框

3、offsetLeft，Top		获取元素距离最近的定位父级的位置

4、clientX，Y	获取事件触发时，鼠标距离可视窗口的X,Y坐标

5、clientWidth，Height	获取元素的宽度和高度，包含padding 块元素有效.

6、scrollTop，Left	获取元素的水平和垂直滚动像素数，使用时要区分是否声明了DTD的情况
	未声明DTD：
		document.body.scrollTop;　
		兼容所有浏览器，来获取滚动条的偏移量;
	声明了DTD：
 		document.documentElement.scrollTop;　　
 		chrome，safari值为0;
7、window.scrollX,Y	获取页面的水平和垂直滚动距离

8、screen.aiailWidth,availHeight	获取可用屏幕大小

9、screenX,Y  获取页面的水平和垂直滚动距离，是window对象，适用于FF，chrome，opera支持，ie不支持，忽视Doctype定义规则，也即是DTD说明。在ie下显示undefined

10、window.innerWidth，innerHeight 	获取可视窗口的大小

11、pageX，Y 	获取事件触发时，鼠标距离整个文档的位置

12、pageXOffset(pageYOffset)  获取页面的水平和垂直滚动距离，是window对象，适用于FF，chrome，IE9+，opera等多浏览器支持(其实是针对ie8和ie9之下的ie)