js中各种位置相关的属性难以区分，特来整理一下
1.获取宽高
-
body的宽度
浏览器可视文档区域宽度-左右margin
-
body的高度
默认是内容撑开的，如果没有内容，值是0
-
clientWidth / clientHeight
内容宽高 + padding - 滚动条宽高（如果有），不包括margin和边框
document.documentElement.clientWidth文档可视区域宽高-滚动条宽高 -
offsetWidth / offsetHeight
计算元素的可视宽度 border、padding计算在内，不包括margin
- document.body.offsetWidth是可视区域宽度-margin
- document.body.offsetHeight是实际内容-margin
-
scrollWidth / scrollHeight
实际内容的宽度 (小于width就是width) +padding
document.documentElement.scrollHeight- 如果有内容,并且小于文档可视高度;
- 如果内容超出可视高度，则高度是实际内容高度
- 或者没有内容,这个高度就是文档可视高度
2. 获取位置
-
clientLeft / clientTop
内容区域的左上角相对于整个元素左上角的位置（包括边框）
clientLeft=左侧边框的宽度，clientTop＝顶部边框的宽度
-
offsetLeft / offsetTop
计算元素相对于参照物的位置(相对于最近的祖先元素定位)
当div有父容器，且父容器定位了，offsetLeft = left + marginLeft
-
scrollTop
位于对象最顶端和窗口中可见内容的最顶端之间的距离，
简单地说就是滚动后被隐藏的高度。
-
图解 event.offsetX，event.clientX，event.pageX，event.screenX属性
参照图.jpg -
clientX / clientY
相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），
可视区域不包括工具栏和滚动条。
- 参照下图：
19000302-5d293ca2eb3ade2e.png-
计算鼠标的页面绝对位置
var x = e.clientX + document.body.scrollLeft || document.documentElement.scrollLeft; var y = e.clientY + document.body.scrollTop || document.documentElement.scrollTop;
-
offsetX、offsetY
相对于带有定位的父盒子的x，y坐标
-
pageX、pageY
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标 ，对于整个页面来说，包括了被卷去的body部分的长度
-
screenX / screenY
相对于用户显示器屏幕左上角的X,Y坐标 。
如果有卷走的body内容，不会包括在内。
-
layerX / layerY
- 如果当前目标元素没有定位，鼠标相对于父容器的左上角位置
- 如果有定位（有e.target)，它的值和offsetX，offsetY相同
-
movementX / movementY
- 仅针对mousemove事件，上次移动坐标和当前移动坐标的差值
- 负数是向左向上，正数是向下向右
