offset：
基本用法：找到对象后，使用
offset大致包括offsetTop、offsetLeft、offsetWidth、offsetHeight、offsetParent五个部分，直白的翻译过来分别是上偏移、左偏移、偏移宽度、偏移高度、偏移父级。翻译虽不够恰当，但仍可体现出其大致意义。
offsetTop: 元素相对父元素上方的偏移。
offsetLeft： 元素相对父元素左边框的偏移。
offsetWidth： 自身包括padding 、 边框、内容区的宽度。
offsetHeight： 自身包括padding、边框、内容去的高度。
offsetParent： 作为偏移参照点的父级元素。
其中需要注意的是:
1、offsetTop和offsetLeft都是相对已定位的父元素或者body的边框内部的偏移量。也即是元素边框外部到父元素边框内部的距离。
2、offsetParent通常并不是元素的直接上级元素，而是指的离元素最近的设置过position（即position不为static）的父级元素，最多查询到body。即父级元素中不存在设置过position的元素时，其offsetParent为body；position=fixed元素的offsetParent为null；body元素的offsetParent为null。
3、position为fixed的元素，其offsetParent为null，但是计算offsetTop和offsetLeft时，可将其认为是浏览器视口。
4、但对于offsetParent同样为null的body，其offsetTop和offsetLeft永远为0。
扫描二维码关注公众号，回复：
5634940 查看本文章
5、所有的值都不带单位px，可以直接使用。
client
由于本人对原生js中各种距离得应用和区分不是很好，特别总结了一下：
clientWidth是对象看到的宽度（不含边线,即border）
scrollWidth是对象实际内容的宽度（若无padding，那就是边框之间距离，如有padding，就是左padding和右padding之间距离）。
offsetWidth是指对象自身的宽度，整型，单位像素（含边线，如滚动条的占用的宽，值会随着内容的输入而不断改变）。
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
易混淆点：
clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
(可以在自己的电脑上自测：console)
网页可见区域宽： document.body.clientWidth;
document.body.clientWidth+'px'
1366px
网页可见区域高： document.body.clientHeight;
document.body.clientHeight;
1589
网页可见区域宽： document.body.offsetWidth (包括边线的宽);
document.body.offsetWidth
1339
网页可见区域高： document.body.offsetHeight (包括边线的宽);
document.body.offsetHeight
1589
网页正文全文宽： document.body.scrollWidth;
document.body.scrollWidth
1349
网页正文全文高： document.body.scrollHeight;
document.body.scrollHeight
1632
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
window.screen.height
768
屏幕分辨率的宽： window.screen.width;
window.screen.width
1366
屏幕可用工作区高度： window.screen.availHeight;
window.screen.availHeight
728
屏幕可用工作区宽度：window.screen.availWidth;
window.screen.availWidth
1366鼠标事件：参照下图
