分享下offsetLeft和clientLeft和scrollLeft区别的总结

在做前端的时候很多时间都会用到offset,clientLeft,scrollLeft…类似这样的属性，他们到底有什么区别呢？他们分别是指哪里呢？我们一起来分析分析。
1.offsetWidth,offsetHeight,offsetLeft,offsetTop

如上图所示，
offsetWidth(对象的可见宽度，包括滚动条等边线)=content+padding+border
offsetHeight(对象的可见高度)=content+padding+border
offsetWidth(相对父元素的偏移宽度)=返回元素上边框到有定位父级元素的上边框的距离。（如果找不到有定位的父级，那么距离就是它的上边框到body的距离。）
offsetHeight(相对父元素的偏移高度)=返回元素左边框到有定位父级元素的左边框的距离。（如果找不到有定位的父级，那么距离就是它的左边框到body的距离。）
2.clientWidth,clientHeight,clientTop, clientLeft
client是当前元素内容和内边距占据空间的大小，不包括边框border
clientWidth：返回元素的宽度（content+padding）
clientHeight：返回元素的高度（content+padding）
clientTop：返回元素上边框大小(boder-top大小)
clientLeft：返回元素左边框大小(border-left大小)
3.scrollWidth， scrollHeight， scrollTop， scrollLeft
scrollWidth：返回元素的总宽度，包含由于溢出而无法在网页上显示的不可见部分。（不包括边框和外边距）
scrollHeight：返回元素的总高度，包含由于溢出而无法在网页上显示的不可见部分。（不包括边框和外边距）
（如果没有溢出，那么和clientWidth/clientHeight情况相同。）
scrollTop：元素被卷起的高度。
scrollLeft：元素被卷起的宽度。
可通过如下图理解：