offsetTop、offsetLeft
只读属性
返回当前元素左边框 / 上边框外边缘到最近的已定位父级左边框内边缘的距离
已定位父级: offetParent，如果无则指向 body
##offsetHeight、offsetWidth
只读属性
返回的是元素的高度或宽度
包括padding、border、水平滚动条，但不包括margin的元素的高度
返回值是一个经过四舍五入的整数
scrollTop、scrollLeft
可读可设置
在有滚动条时，滚动条向下 / 左滚动的距离 / 元素顶部被遮住部分的高度
如果元素不能被滚动，则为0
scrollHeight、scrollWidth
只读属性
返回元素内容的整体尺寸，包括元素看不见的部分（需要滚动才能看见的）
包括padding，但不包括margin和border
clientHeight、clientWidth
- 只读属性
- 包括padding，但不包括border, margin和滚动条
clientTop、clientLeft
- 只读
- 返回顶部 / 左侧边框的宽度，是一个整数
window.innerWidth、window.innerHeight
只读
视口（viewport）的尺寸，包含滚动条
Element.getBoundingClientRect()
这个方法非常有用，常用于确定元素相对于视口的位置
只读，返回浮点值
该方法会返回一个DOMRect对象，
包含left, top, width, height, bottom, right六个属性
left, right, top, bottom
- 都是元素（不包括margin）相对于视口的原点（视口的上边界和左边界）的距离
height, width
元素的整体尺寸
包括被滚动隐藏的部分；padding和border参与计算
另外，heigth=bottom-top, width=right-left
参考文章
一张图彻底掌握scrollTop, offsetTop, scrollLeft, offsetLeft……
搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop