页面中的位置：client、page、screen、offset、以及元素视图位置的区别和方法

clientX 鼠标相对于浏览器左上角x轴的坐标 ; 不随滚动条滚动而改变 ;
clientY 鼠标相对于浏览器左上角y轴的坐标 ; 不随滚动条滚动而改变 ;
pageX 鼠标相对于浏览器左上角x轴的坐标 ; 随滚动条滚动而改变 ;
pageY 鼠标相对于浏览器左上角y轴的坐标 ; 随滚动条滚动而改变 ;
screenX 鼠标相对于显示器屏幕左上角x轴的坐标 ;
screenY 鼠标相对于显示器屏幕左上角y轴的坐标 ;
offsetX 鼠标相对于事件源左上角X轴的坐标 ;
offsetY 鼠标相对于事件源左上角Y轴的坐标 ;
offsetLeft 元素相对于左边的距离;
offsetY 元素相对于上边的距离;

/*
 ****** 元素视图属性
 * offsetWidth 水平方向 width + 左右padding + 左右border-width
 * offsetHeight 垂直方向 height + 上下padding + 上下border-width
 * 
 * clientWidth 水平方向 width + 左右padding
 * clientHeight 垂直方向 height + 上下padding
 * 
 * offsetTop 获取当前元素到 定位父节点 的top方向的距离
 * offsetLeft 获取当前元素到 定位父节点 的left方向的距离
 * 
 * scrollWidth 元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidth
 * scrollHeight 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeight
 * 
 ****** 元素视图属性结束
 * 
 ****** Window视图属性（低版本IE浏览器[<IE9]不支持） 【自测包含滚动条，但网络教程都说不包含？？？】
 * innerWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏） 
 * innerHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏）
 * ***** Window视图属性结束
 * 
 ****** Document文档视图
 * （低版本IE的innerWidth、innerHeight的代替方案）
 * document.documentElement.clientWidth 浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏、滚动条）
 * document.documentElement.clientHeight 浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏、滚动条）
 * 
 * document.documentElement.offsetHeight 获取整个文档的高度（包含body的margin）
 * document.body.offsetHeight 获取整个文档的高度（不包含body的margin）
 * 
 * document.documentElement.scrollTop 返回文档的滚动top方向的距离（当窗口发生滚动时值改变）
 * document.documentElement.scrollLeft 返回文档的滚动left方向的距离（当窗口发生滚动时值改变）
 ****** Document文档视图结束
 * 
 ****** 元素方法
 * 1. getBoundingClientRect() 获取元素到body
 *  bottom: 元素底边（包括border）到可视区最顶部的距离
 *  left: 元素最左边（不包括border）到可视区最左边的距离
 *  right: 元素最右边（包括border）到可视区最左边的距离
 *  top: 元素顶边（不包括border）到可视区最顶部的距离
 *  height: 元素的offsetHeight
 *  width: 元素的offsetWidth
 *  x: 元素左上角的x坐标 
 *  y: 元素左上角的y坐标 在这里插入代码片
 * 
 * 2. scrollIntoView() 让元素滚动到可视区
 * 
 * ***** 元素方法结束
 * 
 */

window.outerHeight //浏览器高度
window.outerWidth //浏览器宽度
window.innerHeight //浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度
window.innerWidth //浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。
window.outerHeight - window.innerHeight //工具栏高/宽度，包含了地址栏、书签栏、浏览器边框等范围

screen.height //屏幕高度
screen.width //屏幕宽度
screen.availHeight //屏幕可用高度，即屏幕宽度减去上下任务栏后的高度
screen.availWidth //屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度
screen.height - screen.availHeight //任务栏高度```

body.offsetHeight // body总高度
body.offsetWidth // body总宽度
body.clientHeight // body展示的高度；表示body在浏览器内显示的区域高度
body.clientWidth // body展示的宽度；表示body在浏览器内显示的区域宽度
window.innerHeight - body.clientHeight // 滚动条高度/宽度