clientHeight/Width
- 只读属性
- 内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0
Height: content + padding - scrollbarH
Width: content + padding - scrollbarW
offsetHeight/Width
- 只读属性
- 不包含:before或:after等伪类元素的高度。
- 如果元素被隐藏（例如 元素或者元素的祖先之一的元素的style.display被设置为none），则返回0
Height: content + padding + border + scrollbarHeight
Width: content + padding + border + scrollbarWidth
scrollHeight/Width
- 只读
- 返回元素的高度，包括不可见的溢出部分
- 包含伪类的高度(::after,::before等)
- 没有滚动条时，与clientWidth/Height相等
Height: content + padding + scrollbarH
Width: content + padding + scrollbarW
clientLeft/Top
- 表示一个元素的左/上边框的宽度
- 如果元素的文本方向是从右向左，并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。
- clientLeft 不包括左/上外边距和左/上内边距。
- clientLeft 是只读的。
offsetParent
- 只读
- 假如当前元素的父级元素中有CSS定位，offsetParent取最近的那个父级元素。
- 如果当前元素没有设置过position，会返回最近的td、th、table、body
- 当该元素的display为none时候，offsetParent 返回 null
- 如果当前元素的父级元素没有进行CSS定位（position为absolute或relative）,offsetParent为body.
offsetLetf/Top
- offsetLeft返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。
- offsetTop返回当前元素左上角相对于 HTMLElement.offsetParent 节点的上边界偏移的像素值。
window.scrollX
返回文档/页面水平方向滚动的像素值。
window.scrollY
返回文档在垂直方向已滚动的像素值。
Element.getBoundingClientRect()
返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。
DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
width、height就是元素的宽高
top、left、right、bottom可以看下图
