offset+client+scroll

 

offset:是基于一个元素来讲，基于一个元素的整体来说。如一个div元素,一个body元素。

值及说明：

offsetWidth：整个div的外边界宽度，也就是说包括边框在内。

offsetHeight：同理，高度，包括边框。

offsetLeft：从整个div元素的外边界开始，向左移动，直到碰到下一个元素的边界（无论是内边界或外边界）。

offsetTop：同理，向上移动，直到碰到下一个元素的外边界（无论是内边界或外边界）。

 

client：是基于一个元素的可视区域来讲，即一个元素展示出来的平面的可视区域，不包括隐藏的、卷起的区域。

值及说明：

 clientWidth：元素平铺在界面上，可看到的区域的宽度。

clientHeight:同理，可看到的区域的宽度。

clientLeft：从 元素可视区域开始，向左移动，直到遇到一个边界（最大的可能是遇到自身offset元素的外边界）。 

clientTop：同理，向上移动，直到遇到一个边界（最大的可能是遇到自身offset元素的外边界）。

 

scroll:基于存在卷曲行为的元素来说的。

          如果一个元素原来的大小是：1000px * 1000px，可视区域的大小：800px * 800px

scrollWidth:1000px;没卷之前，元素的实际宽度。

scrollHeight:1000px;没卷之前，元素的实际高度。

scrollTop:0~200px;被向上卷起来的高度。

scrollLeft:0~200px;被向左卷起来的高度。

 

对这部分知识的理解一直很模糊，参考一些文档后的理解，有可能存在错误之处。