offsetTop/offsetLeft
HTMLElement.offsetTop 是一个只读属性，返回当前元素左上角相对HTMLElement.offsetParent 节点的上边界偏移的像素值。
HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,``td,``th,``body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null
offsetWidth/offsetHeight
**HTMLElement.offsetWidth** 是一个只读属性，返回一个元素的布局宽度。offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。
offsetWidth = width+padding+border+scrollbar;
scrollTop/scrollLeft
**Element.scrollTop** 属性可以获取或设置一个元素的内容垂直滚动的像素数。
一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
scrollWidth/scrollHeight
Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。
scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。 宽度的测量方式与clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。 它还可以包括伪元素的宽度，例如::before或::after。 如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth
scrollWidth = width+padding;
clientTop/clientLeft
**Element.clientTop**一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。
clientWidth/clientHeight
内联元素以及没有 CSS 样式的元素的 **clientWidth** 属性值为 0。**Element.clientWidth** 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。
clientWidth = width+padding;
getBoundingClientRect()
**Element.getBoundingClientRect()** 方法返回元素的大小及其相对于视口的位置。
如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。
返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。
由于兼容性问题，尽量仅使用 left, top, right, 和 bottom.属性是最安全的。
简易demo
<body> <div class="content">
<div class="l1">
<div class="l2">
<p class="offsetInfo"></p>
<p class="scrollInfo"></p>
<p class="clientInfo"></p>
</div>
</div>
</div>
</body>
<script>
window.onload = function(){
let dom = document.querySelector('.l2');
let offsetDom = document.querySelector('.offsetInfo');
let scrollDom = document.querySelector('.scrollInfo');
let clientDom = document.querySelector('.clientInfo');
offsetDom.innerHTML = `offsetLeft: ${dom.offsetLeft}; offsetTop: ${dom.offsetTop}; offsetWidth: ${dom.offsetWidth}; offsetHeight: ${dom.offsetHeight} offsetHeight: ${dom.offsetHeight}`;
scrollDom.innerHTML = `scrollLeft: ${dom.scrollLeft}; scrollTop: ${dom.scrollTop}; scrollWidth: ${dom.scrollWidth}; scrollHeight: ${dom.scrollHeight}`;
clientDom.innerHTML = `clientLeft: ${dom.clientLeft}; clientTop: ${dom.clientTop}; clientWidth: ${dom.clientWidth}; clientHeight: ${dom.clientHeight}`;
dom.onscroll = function(){
scrollDom.innerHTML = `scrollLeft: ${dom.scrollLeft}; scrollTop: ${dom.scrollTop}; scrollWidth: ${dom.scrollWidth}; scrollHeight: ${dom.scrollHeight}`;
}
}
</script>
<style>
body{
padding: 10px;
margin: 0;
}
.content{
padding: 10px;
border: 2px solid #ddd;
}
.l1{
/* position: relative; */
padding: 10px;
background: #A4F790;
}
.l2{
width: 500px;
height: 120px;
padding: 10px;
margin: 10px;
border: 3px solid #fff;
background: #B0F9F9;
overflow: auto;
}
</style>
