整理js中offset,client,scroll三大家族

offset家族：

offsetTop:距离第一个有定位的父盒子上边的距离。
同理，offsetLeft就是距离第一个有定位的父盒子左边的距离。
若没有父盒子则以body为准。
与style.left不同：
1、style.left只能获取行内的
2、style.left只能返回带有定位盒子的left，而offsetLeft可以返回没有定位盒子距离左侧的位置
3、offsetLeft是只读的，而style.left是可读写的
同理,offsetTop等也是一样。

offsetHeight:元素本身的高，包括padding,border,content。
同理，offsetWidth就是元素本身的宽度。

offsetParent:返回当前对象的父元素（带有定位），有可能是父亲，也有可能是爷爷，也有可能是body。与parentNode不同，parentNode一定能拿到父元素，而offsetParent拿最近的带有定位的父元素。

client家族：

clientX:事件对象（event）中的属性，为光标相对于网页的水平位置
同理，clientY为光标相对于网页的垂直位置。
在这里要提到另外两个属性分别是pageX与screenX。
pageX与clientX的区别在于，当页面内容很多有滚动条时，滚动后的clientX不会变化，而pageX则会算上滚动后的高度。
screenX与client的区别在于，当你缩小浏览器的窗口时，screenX不会变化，因为screenX是光标相对于屏幕的水平位置。

clientWidth:可视区域的宽(没有边框),边框内部的宽度

clientHeight:可视区域的高(没有边框),边框内部的高度

clientLeft:左边边框的宽度

clientTop:上面的边框的宽度

scroll家族

scrollLeft:向左卷曲出去的距离

scrollTop:向上卷曲出去的距离

scrollWidth:元素中内容的实际的宽(如果内容很少,没有内容,元素自身的宽),没有边框

scrollHeight:元素中内容的实际的高(如果内容很少或者没有内容,元素自身的高),没有边框