1.client部分

clientHeight:内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度(不含边框，也不包含滚动条等边线，会随窗口的显示大小改变)

clientLeft,clientTop: 这两个返回的是元素周围边框的厚度（border）,如果不指定一个边框或者不定位该元素,他的值就是0.

2.offset部分

`计算时都包括此对象的border，padding`

offsetLeft：获取对象左侧与定位父级之间的距离

offsetTop：获取对象上侧与定位父级之间的距离

`PS：获取对象到父级的距离取决于最近的定位父级position`

offsetWidth：获取元素自身的宽度（包含边框）

offsetHeight：获取元素自身的高度（包含边框）

`注：与style.top 不同，offsetLeft只可读，不可以对其进行赋值。offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值`

3.clienX offsetX screenX pageX 部分

`这里最重要的一点区别是，上面的2个对象属性都相对于标签元素；而clientX、offsetX则是相对于鼠标事件对象，即需要触发鼠标事件才会有clientX、offsetX。`

clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而变动，它在计算时其实是以body左上角原点（即页面本身的左上角，而不是浏览器可见区域的左上角）为参考点计算的，这个相当于已经把滚动条滚过的高或宽计算在内了，所以无论滚动条是否滚动，他都是一样的距离值。

所以基本可以得出结论：

pageX > clientX, pageY > clientY

pageX = clientX + ScrollLeft(滚动条滚过的水平距离)

pageY = clientY + ScrollTop(滚动条滚过的垂直距离)

3.scroll部分

scrollLeft：设置或获取当前左滚的距离，即左卷的距离；

scrollTop：设置或获取当前上滚的距离，即上卷的距离；

scrollHeight：获取对象可滚动的总高度；scrollWidth：获取对象可滚动的总宽度；

`scrollHeight = content + padding；（即border之内的内容）`