clientWidth、offsetWidth、scrollWidth、innerWidth的区别详解

clientWidth和clientHeigh、clientTop和clientLeft

实际高度：

clientWidth = width + 左右 padding
clientHeigh = height +上下 padding
clientTop = boder.top (上边框的宽度)
clientLeft = boder.left (左边框的宽度)

offsetWidth和offsetHight、offsetTop和offsetLeft

实际高度：

offsetWidth = width + 左右 padding + 左右 boder
offsetHeith = height +上下 padding + 上下 boder
offsetTop：当前元素上边框外边缘到最近的已定位父级 (offsetParent) 上边框内边缘的距离。如果父级都没有定位，则分别是到 body 顶部和左边的距离
offsetLeft：当前元素左边框外边缘到最近的已定位父级 (offsetParent) 左边框内边缘的距离。如果父级都没有定位，则分别是到 body 顶部和左边的距离

scrollWidth和scrollHeight 、 scrollTop和scrollLeft

实际高度：

scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度 + 被隐藏区域宽度）
scrollHeight：获取指定标签内容层的真实高度（可视区域高度 + 被隐藏区域高度）
scrollTop：内容层顶部到可视区域顶部的距离
scrollLeft：内容层左端到可视区域左端的距离

例：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
持续获取高度的方式：
window.addEventListener(‘scroll’, () => {
var scrollTop = document.documentElement.scrollTop || window.pageYOffset ||
document.body.scrollTop;
});

innerWidth和innerHeight

innerWidth：浏览器窗口可视区宽度（不包括浏览器控制台、菜单栏、工具栏）
innerHeight：浏览器窗口可视区高度（不包括浏览器控制台、菜单栏、工具栏）

offsetParent

offsetParent 属性返回一个对象的引用，这个对象是距离调用 offsetParent 元素最近的（在包含层次中最靠近的），并且是已经进行过CSS定位的容器元素。
即：
1、如果当前元素的父级元素没有进行CSS定位 ( position 为 absolute 或 relative )，offsetParent 为 body。
2、如果当前元素的父级元素中有CSS定位 ( position 为 absolute 或 relative )，offsetParent 取最近的那个父级元素。

如何获取网页高度、屏幕高度、滚动高度？
参考：https://blog.csdn.net/qq_44731369/article/details/113352678