offset，client，scroll 系列对比

三大系列	作用
element.offsetWidth	返回包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth	返回包括padding、内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth	返回自身实际的宽度。不含边框，返回数值不带单位

其示意图可见下图：

offset 系列

client 系列

scroll 系列

主要的用法区别： 

1. offset 系列 常用于获取元素位置（自身的宽度高度），获得元素距离带有定位父元素的位置 比如：offsetLeft 和 offsetTop 
2. client 翻译为客户端，可动态获取元素的大小  比如：clientWidth 和 clientHeight

   client系列属性	作用
   element.clientTop	返回元素上边框的大小
   element.clientLeft	返回元素左边框的大小
   element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
   element.clientHeight	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位

3. scroll 经常用于获取滚动距离 比如：scrollTop 和 scrollLeft

   scroll系列属性	作用
   element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
   element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
   element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
   element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

 注意：页面滚动的距离要通过 window.pageXOffset  获取。