浏览器内各类高度
一图获取各类高度 
主要通过系统提供的 window、document 来获取高度：
- 屏幕分辨率高度
window.screen.height - 屏幕可用高度
window.screen.availHeight - 浏览器高度（不含浏览器1px边框）
window.outerHeight - 浏览器视窗高度
window.innerHeight
<html></html或<body></body>标签会默认充满视窗，所以视窗高度 也可以是：document.documentElement.clientHeight、document.body.clientHeight
- 页面滚动高度
document.body.scrollTop - 元素高度
DOM.offsetHeight
元素高度默认不包括
margin border padding，如果设置了box-sizing: border-box;那么高度会包括padding。
*将以上 height 替换成 width 即可得到相应宽度。
鼠标事件中的边距
一图获取事件中的各类边距 
获取事件 event 触发位置与各个层级的边界距离，在事件触发函数内 (e) => {}：
- 在当前 DOM 中的相对位置
e.offsetX, e.offsetY（可联想 DOM 高度offsetHeight来加深记忆） - 在视窗中的相对位置
e.clientX, e.clientY（可联想视窗高度document.body.clientHeight） - 在当前页面中的相对位置
e.pageX, e.pageY - 在系统桌面中的相对位置
e.screenX, e.screenY（是的，没看错，是系统桌面！包括扩展桌面！）
总结
通过以上两节内容了解了通过 JavaScript 获取各类高度、相对位置的方法，重点记住最常用的：
- 视窗高度
window.innerHeight / document.body.clientHeight - DOM高度
DOM.offsetHeight - 事件触发位置的相对位置
e.()X, e.()Y， 其中 视窗client，页面page，DOMoffset
笔记主要为自用，如有错漏欢迎指正，友好交流！