前言
由于在实际开发中经常遇到 offsetXXX、scrollXXX 和 clientXXX 这些属性，但是这些属性之间的差异又不是很大，导致在使用的时候经常混淆它们，接下来，我会用最直观的方式让你一劳永逸。
有关的属性先列出来：
offsetWidth/offsetHeight/offsetTopclientWidth/clientHeightscrollWidth/scrollHeight/scrollTop
offsetXXX
首先看一下与 offset 有关的属性：
offsetWidth/offsetHeight是指一个元素的 CSS 「标准宽高」，它包含了边框、内边距、元素内容以及滚动条（如果存在的话）。
借助 MDN 上的图片可以看到元素的 offsetWidth，这就是这个元素在页面中「实际占用的空间」，同时当元素的形状发生变化时（比如说放大或缩小），offsetWidth 就表示元素的布局宽高，并不代表实际渲染出来的宽高，如需获取渲染的宽高请使用 getBoundingClientRect() 方法计算得到真正的 offsetWidth
clientXXX
clientWidth/clientHeight就表示一个元素的「内容宽高」，包含元素内容以及内边距
也就是说如果你只想要获取「显示内容区域的大小」就是用 clientWidth
scrollXXX
scrollWidth/scrollHeight表示一个元素内容区域的实际大小，包括不在页面中的可滚动部分（内容和内边距）
它可以理解为 clientXXX 的增强版，是整个内容的大小
xxxTop
offsetTop是当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系scrollTop在有滚动条的情况下，为元素可视区域距离元素顶部的像素，也就是已经滚动了多少距离
区别与联系
总结一下这里面的区别和联系：
offsetXXX可以看作是clientXXX+ 外边框 border + 滚动条（有的话）scrollXXX可以看作是clientXXX+ 隐藏区域大小（如果有滚动的话）
题外话
书到用时方恨少，我也是在阅读源码的过程中看见很多这样的属性，所以专门写一篇文章来分析一下这几个的区别与联系，最近一直在读的 ElementUI 源码实在是伤脑筋，下一篇就是 Select 组件了，这已经让我看了好几天了，终于快写完了，如果想了解的继续期待一下吧。
