基本介绍
有些交互会需要获取元素的大小和位置，js 提供了多种相关属性，下面介绍了不同的属性之间的差异。
大小
clientHeight&clientWidth
用于描述元素内尺寸，包括 元素内容+内边距 大小，不包括边框（IE下实际包括）、外边距、滚动条部分 。
offsetHeight&offsetWidth
用于描述元素外尺寸，包括 元素内容+内边距+边框，不包括外边距和滚动条部分 。
scrollWidth&scrollHeight
是元素的内容区域加上内边距加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等。
位置
clientTop&clientLeft
返回内边距的边缘和边框的外边缘之间的水平和垂直距离，也就是左，上边框宽度。
offsetTop&offsetLeft
表示该元素的左上角（边框外边缘）与已定位的父容器（offsetParent对象）左上角的距离。
scrollLeft&scrollTop
- 如果元素内没有滚动条，值为 0。
- 如果元素内有滚动条，则是指该元素的滚动条位置。
- 它们可以通过 js 动态更改，例：页面滚动位置可以通过
document.documentElement.scrollTop = 100动态设置。
offsetParent
对象是指元素最近的定位（relative，absolute）祖先元素，递归上溯，如果没有祖先元素是定位的话，会返回 null。
getBoundingClientRect()
一种更强大的元素方法，返回改元素的 DOMRect 对象，对象里面包含了以下属性：
- top、left 基准点为元素的左上角，相对点为可视区域的左上角位置，上、左边距（不包含本身大小）。
- bottom、right 基准点为元素的右下角，相对点为可视区域的左上角位置，下、右边距（包含本身大小）。
- height 元素高度，等同于 offsetHeight
- width 元素高度，等同于 offsetWidth
- x、y MDN 没有解释，只是说兼容性不好是只读的，应该是等同于 top、left，不过不建议使用。
