1 偏移量
偏移量：包括元素在屏幕上占用的所有可见的空间。
1.1 offsetWidth & offsetHeight
offsetWidth以及offsetHeight用来描述元素外尺寸，公式如下：【不包括外边距和滚动条】
- offsetWidth = 元素内容宽 + 左右内边距 + 左右边框;
- offsetHeight = 元素内容高 + 上下内边距 + 上下边框;
1.2 offsetLeft & offsetTop
- offsetLeft：元素的左外边框至offsetParent元素的左内边框之间的像素距离。
- offsetTop：元素的上外边框至offsetParent元素的上内边框之间的像素距离。
tips：
- 所有偏移量只读
- 元素设置了display:none,偏移量属性为0
- 每次访问偏移量属性都会重新计算
1.3 offsetParent
2 客户区大小
元素的客户区大小：元素内容及其内边距所占据的空间大小，滚动条占用的空间不计算在内。
- 属性：clientWidth, clientHeight, clientLeft, clientTop
tips：
- 只读，每次访问都需要重新调用
3 滚动大小
- scrollHeight：在没有滚动条的情况下，元素内容的总高度。
- scrollWidth：在没有滚动条的情况下，元素内容的总宽度。
- scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。
- scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置
4 坐标位置
- e.clientX、e.clientY：鼠标指针在视口中的水平坐标和垂直坐标，不包含滚动条
- e.pageX、e.pageY：表示鼠标光标在页面中的位置
- screeX、screenY：鼠标指针相对于整个屏幕的坐标信息
具体说明：jmazm.github.io/2017/10/03/…
5 getBoundingClientRect()
- 该方法返回一个对象，里面的值都是相对于视口的位置而言的。
