Offset
offsetWidth和offsetHight （盒子盒模型的宽/高）
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
offset宽/高 = 盒模型的宽/高；
注意：此属性是只读的，与box-sizing的取值有关
关于box-sizing请参考这篇博客：学会使用box-sizing布局
当box-sizing = content-box（在宽度和高度之外绘制元素的内边距和边框）
offsetWidth =width+padding+border；
offsetHeight =height+padding+border；
当box-sizing = border-box（为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制）
offsetWidth =Math.max(width,(padding+border))；
offsetHeight =Math.max(height,(padding+border))；
offsetLeft和offsetTop （与父盒子左/上面的距离）
父盒子 = 父盒子有定位 ? 父盒子 : body
offsetLeft/offsetTop = 与父盒子左/上面的距离
offsetParent （父盒子节点）
父盒子 = 父盒子有定位 ? 父盒子 : body
offsetParent = 父盒子
Scroll
scrollWidth和scrollHeight
scrollWidth/scrollHeight与offsetWidth/offsetHight很像。但是有两点不同：
- scrollWidth/scrollHeight计算不包括border，而offsetWidth/offsetHight计算包括了border
- 如果有内容超出了，scrollWidth/scrollHeight显示内容的宽度/高度）
scrollLeft和scrollTop
网页，被浏览器遮挡的头部和左边部分。
被卷去的头部和左边部分。
Client
clientWidth和clientHight
clientWidth/clientHeight与offsetWidth/offsetHight很像,但是不包括border
clientTop/clientLeft
clientTop/clientLeft = 盒子的border宽高
Event
pageX/pageY 和 clientX/clientY 和 offsetX/offsetY 和 screenX/screenY
直接上图
其中offsetX/offsetY：
鼠标相对于触发事件的元素的位置，以元素盒子模型的内容区域的左上角为原点，如果有border，可能出现负值。
参考博客：
clientY,offsetY,screenY/layerY,pageY备忘笔记
js进阶：offset家族 Scroll家族 client家族
关于鼠标事件的screenY,pageY,clientY,layerY,offsetY属性 （详细图解）