很多人常常混淆三大家族的概念及其用法，这里稍稍介绍了其不同含义。
1、offset
1.1 offsetWidth / offsetHeight
获取元素的宽度/高度，包含 padding 和 border
1.2 offsetLeft / offsetTop
获取元素到有定位属性的父级的距离，父级都没有定位属性，则表示到 body 的距离
2、client
2.1 clientWidth / clientHeight
获取元素的宽度/高度，包含 padding，但不包含 border
2.2 clientLeft / clientTop
获取获取元素内同到边框的距离（类似于border-left / border-top）
2.3 clientX / clientY
在整个可视区的位置
3、scroll
3.1 scrollLeft / scrollTop
滚动条滚动的距离
3.2scrollWidth / scrollHeight
可滚动的内容宽度 / 高度 （相当于内容的width/height）
4、其他
4.1. pageX / pageY
返回其在整个文档中的坐标（包含滚动条）
4.2.offsetX / offsetY
offsetX和offsetY相对于父容器，而pageX和pageY相对于文档。
4.3其他属性欢迎补充。
