client和offset和scroll系列

client系列：

元素的可视宽高：
元素 .clientWidth----(width+左右padding)
元素 .clientHeight----(height+上下padding)

屏幕的可视宽高：
document.documentElement.clientWidth/Height
(设置元素范围不超过浏览器窗口的时候，会用到)

元素边框：
元素.clientTop —上边框
元素.clientLeft—左边框

offset系列：

获取元素的占位宽高：
元素.offsetWidth:width+左右padding+左右border
元素.offsetHeight:height+ 上下padding+上下border
元素.offsetTop:当前元素的顶部，到定位父元素的距离，如果没有定位父元素，到body的距离。
元素.offsetLeft:当前元素的左边，到定位父元素的距离，如果没有定位父元素，到body的距离。

scroll系列：

滚动事件 onscroll ： 滚动条滚动的时候调用

屏幕的滚动距离：
获取页面被卷去的高：
document.documentElement.scrollTop:
document.body.scrollTop:

元素：
元素.scrollTop:被卷去的高
元素.scrollLeft:被卷去的宽
元素.scrollWidth:获取元素实际内容宽
元素.scrollHeight:获取元素实际内容高

这些位置属性，经常在元素被拖拽移动的时候用到。具体案例请参考前一个博客—拖拽元素进行移动。

其中clientWidth和offsetWidth容易混淆，这样记比较容易。offsetWidth–占位宽，实际中，元素的width，padding，border都是占位的。希望对你有帮助哦。