笔者最近在重构组件库的时候，学习大佬们的代码，表示很迷茫，主要是感觉这个XXHeight才在这里见到，然后又出现了另一个XXHeight。感觉有点混淆，所以简单的辨析一下这个几个Height和Width顺便再辨析一下Top和Left。
offset |
client |
scroll |
|---|---|---|
offsetWidth |
clientWidth |
scrollWidth |
offsetHeight |
clientHeight |
scrollHeight |
offsetLeft |
clientLeft |
scrollLeft |
offsetTop |
clientTop |
scrollTop |
Offset相关
offsetTop：子元素距离已定位的父容器的上边距离，不包括子元素与父元素的borderoffsetLeft：子元素距离已定位的父容器的左边距离，不包括子元素与父元素的borderoffsetWidth：元素外尺寸的宽度，是元素内容宽度+内边距+边框，不包括外边距与滚动条offsetHeight：元素外尺寸的高度，是元素内容高度+内边距边框，不包括外边距与滚动条。
Client相关
clientTop：元素的内边距外边缘和边框外边缘的距离，实际就是上边框的厚度。clientLeft：元素的内边距外边缘和边框外边缘的距离，实际上是左边框的厚度。clientWidth：元素尺寸宽度，仅仅表示元素内容宽度，包括内边距，不包括边框。clientHeight：元素尺寸高度，仅仅表示元素内容高度，包括内边距，不包括边框。
Scroll相关
scrollTop：元素滚动条上边已经滚动的高度scrollLeft：元素滚动条左边已经滚动的乱度scrollWidth：内容区域加内边距加上溢出的尺寸scrollHeight：内容区域加内边距加上溢出的尺寸