offset
offsetTop: 得到元素的偏移位置 距离顶部，获取的是你绑定元素上边距相对离自己最近且position属性为非static的祖先元素的偏移量，和有没有滚动条没有关系
范围：position:top+margin-top
offsetLeft：当前元素距离左侧的偏移位置
范围：position:left+margin-left
注意：如果为父级，那么子级偏移量以带有定位的父级为准，如果父级没有定位，则以body为准
offsetHeight：表示网页的可见区域高度(包括边线的高)，offsetHeight获取到的高度是网页实际渲染出来的高度+外边距+内边距+边框
范围：offsetHeight = height + padding + border 不包含定位
offsetWidth ：可以返回对象的padding+border+元素width属性值之和，style.width返回值就是定义的width属性值
范围：offsetWidth=padding+border
client
clientWidth ： 返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
范围：clientWidth = (content width) + (padding top+padding bottom);翻译成中文就是 clientWidth = 内容实际高度 + 上下内边距。
在网页的盒子模型中，一个元素由内到外分别由 width + padding + border + margin组成，而clientWidth只取前面的width和padding。不管内容可不可见，即使你用定位把元素移出屏幕外，clientWidth获取到的值仍然不变。
clientHeight：表示网页的可见区域高度
范围：clientHeight = (content height) + (padding top+padding bottom);翻译成中文就是 clientHeight = 可见区域内容实际高度 + 上下内边距。
在网页的盒子模型中，一个元素由内到外分别由 height + padding + border + margin组成，而clientHeight只取前面的height和padding。不管内容可不可见，即使你用定位把元素移出屏幕外，clientHeight获取到的值仍然不变。
client和offsetWidth的区别是不包含边框
scroll
scrollHeight：可滚动内容的高度，属性是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding），不包含外边距（margin）、边框（border），是一个整数，单位是像素 px
范围：scrollHeight=(content height) + padding
scrollTop: 网页被卷去的高度，代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop == 0 恒成立。单位px，可读可设置
scrollWidth ： 返回自身实际宽度，不含边框，返回数值不带单位
注意：
- offset系列经常用于获得元素的位置
- client经常用于获取元素大小
- scroll经常用于获取滚动距离
pageX，pageY作用及区别
pageX和pageY：
相对于浏览器中完全呈现内容区域的左上角。此参考点位于左上角的URL栏和后退按钮下方。这一点可以在浏览器窗口中的任何位置，并且如果在页面中嵌入了嵌入的可滚动页面并且用户滚动移动滚动条，则实际上可以改变位置
screenX和screenY：
相对于物理屏幕/监视器的左上角，只有增加或减少监视器数量或监视器分辨率时，此参考点才会移动
clientX和clientY：
相对于浏览器窗口的内容区域(视口)的左上角边缘。即使用户从浏览器中移动滚动条，此点也不会移动。
| 属性 | 说明 |
|---|---|
| clientX | 以浏览器左上顶角为原点，定位x轴坐标 |
| clientY | 以浏览器左上角顶角为原点，定位y轴坐标 |
| offsetX | 以当前事件的目标对象左上角为原点，定位x轴坐标 |
| offsetY | 以当前事件的目标对象左上角为原点，定位y轴坐标 |
| pageX | 以Document 对象（即文本窗口）左上角为原点，定位x轴坐标 |
| pageY | 以Document 对象（即文本窗口）左上角为原点，定位y轴坐标 |
| screenX | 计算机屏幕左上角为原点，定位x轴坐标 |
| screenY | 计算机屏幕左上角为原点，定位ｙ轴坐标 |
| layerX | 最近的绝对定位的父元素（如果没有，则为Document对象）左上角为原点，定位x轴坐标 |
| layerY | 最近的绝对定位的父元素（如果没有，则为Document对象）左上角为原点，定位ｙ轴坐标 |