引用文章：《参考链接 : js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”，你知道多少》
https://www.cnblogs.com/youziclub/p/4811069.html
引用文章：《关于offsetTop的理解》
https://blog.csdn.net/jinxi1112/article/details/90692484
引用文章：《鼠标事件以及clientX、offsetX、screenX、pageX、x的区别》
https://blog.csdn.net/weixin_41342585/article/details/80659736
引用文章：《搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop》
https://blog.csdn.net/qq_35430000/article/details/80277587
拓展阅读：《html和body的区别》
https://www.iteye.com/blog/justcoding-2313021
拓展阅读：《详细了解 clientWidth、clientHeight、clientLeft、clientTop 以及几个常用的场景》
https://segmentfault.com/a/1190000019507352?utm_source=tag-newest
元素的位置
- top、clientTop、scrollTop、offsetTop
- height、clientHeight、scrollHeight、offsetHeight
诸如left、clientLeft、offsetLeft、width、clientWidth、scrollWidth等，和top、height类似，不再赘述
top
与css中的top属性值相同
clientTop
元素上边框的厚度，当没有指定边框厚底时，一般为0
scrollTop
页面最顶端和窗口中可见内容的最顶端之间的距离，简单地说就是滚动后被隐藏的高度
offsetTop和offsetPatent
- offsetTop：元素到offsetParent顶部的距离
- offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：
height
和css中的height属性值相同
clientHeight
包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。
scrollHeight
- IE、Opera 认为 scrollHeight 是网页内容实际高度(包括滚动隐藏了的部分)，可以小于 clientHeight
- FF认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。
offsetHeight
offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。
鼠标的位置
clientX、clientY
点击位置距离当前body可视区域的x，y坐标
pageX、pageY
对于整个页面来说，包括了被卷去的body部分的长度
screenX、screenY、x、y
点击位置距离当前电脑屏幕的x，y坐标
offsetX、offsetY
相对于带有定位的父盒子的x，y坐标
