这段日子看到scrollTop,突然想起了这三个小兄弟，于是看了很多文章，但发现总结的各有优缺和对错，于是决定自己总结一下，仅当随笔。有错误的欢迎指正。
这些属性均是用于获取页面元素在网页中的位置或相对位置，这里又可以简单的分为两类用途：
1.获取页面固定元素的位置；2.获取鼠标点击位置
先从页面固定元素的位置说起，用法均是 element.属性名 ：
1.首先还是来说说offset家族吧（offsetWidth、offsetHeight、offsetLeft和offsetTop）
offsetWidth是指元素的宽度（包括元素的边框），或者说元素水平方向上占用的空间大小。
offsetHeight是指元素的高度（包括元素的边框），或者说元素垂直方向上占用的空间大小。
offsetLeft:元素左外边框到 上层元素或左侧元素 之间的距离
offsetTop:元素上外边框到 上层元素或左侧元素 之间的距离
width和height很好理解，只需注意他是包含边框宽度的；
关键在于Left和Top很可能有坑会出现，其实目前发现写也就两种情况：
1.对于普通元素。就是距离其左侧最近的兄弟元素或父元素的距离
2.对于position:absolute 等脱离文档流的，就要看其left和top属性了
2.client家族 （clientWidth、clientHeight、clientLeft和clientTop）
了解了offset，其实client很简单。
clientWidth和clientHeight是不含边框厚度的宽高
clientLeft和ClientTop则能获取到边框的厚度
3.scroll家族（scrollTop、scrollLeft、scrollWidth和scrollHeight）
正如offset和client在document.body元素上没有什么实际意义不多说了，
scroll家族 主要用于document.body元素上， 用在页面元素上并没有什么特殊体现
当页面出现上下或左右滑动条时，scroll的作用就体现出来了：
document.body.scrollWidth和document.body.scrollHeight就是页面可视区域的大小了，
document.body.scrollLeft和document.bodyscrollTop就是可视区离整个文档的左、顶侧的距离。
最后关于这三者的总结就是 :
要找某个元素的位置和大小：用elem.offset；
要找涉及到元素的边框厚度：用elem.client ;
要涉及到滚轮和可视区大小、距离，用：document.body.scroll ；
另外，对于事件对象e的几个获取鼠标位置的属性，是这样的（事件触发时传入并使用）：
相对于屏幕左上角: e.screenX/screenY
相对于文档显示区左上角: e.clientX/clientY
相对于所在元素左上角的坐标:e.offsetX/offsetY
来源：oschina
链接：https://my.oschina.net/u/2978283/blog/800666