js中 offset /client /scroll总结

offset家族(只能读取，不能操作)：

offsetLeft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（就是子元素左边框到父元素左边框的距离）。

offsetTop:元素的边框的外边缘距离与已定位的父容器（offsetparent）的上边距离（就是子元素上边框到父元素上边框的距离）。

offsetWidth:描述元素外尺寸宽度，是指元素内容width+padding*2+border*2，不包括margin和滚动条部分。

offsetHeight:描述元素外尺寸高度，是指元素内容height+padding*2+border*2，不包括margin和滚动条部分。

client家族(只能读取，不能操作)：

clientLeft:元素的内边距的外边缘和边框的外边缘的距离，实际就是border-left的宽度

clientTop:同理border-top的宽度

clientWidth: 元素内容width+padding，不包括border、margin、滚动条部分

clientHeight: 元素内容width+padding，不包括border、margin、、滚动条部分

scroll家族(只能读取，不能操作)：

scrollWidth：内容width+padding+加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等

scrollHeight：同上height+padding+加上溢出尺寸

scrollTop：滚动条上方卷去的高度

scrollLeft：滚动条左边卷去的宽度