原生JS里面有很多看起来很相似的概念，不搞明白的话，容易用错，最好自己动手写写demo，画画图，更容易弄明白。本文主要记录clientX、offsetTop、clientHeight、scrollHeight等这一系列相关的几个概念，主要参考了网上一些概念加自己理解。
初识
相信大家对下面一张图，并不陌生，一搜索offsetTop相关就有，如果都能搞明白的就不需要往下看了。
注：图片转自参考文章《浅析offsetLeft,Left,clientLeft之间的区别》
深入
下面具体分情况表示各值，主要涉及的就是上图里面的概念。
其实主要是对上面漂亮的图的手抄版，字很丑，但经过自己动手，就很清楚明了。
简单版
正常文档流下，各值分开示意图：
脱离文档流情况下，最主要区别是offsetTop和offsetLeft，主要依靠父元素定位，offsetTop是子元素距离父元素的高度，如下图：
注：
clientX/clientY是相对于浏览器可视窗口来计算。
pageX/pageY,offsetTop/offsetLeft是相对于页面（文档）来计算。
升级版
正常文档流下，综合示意图：