offset
offset这个单词本身是--偏移，补偿，位移的意思。js中有一套方便的获取元素尺寸的办法就是offset家族;
offsetWidth、offsetHight、offsetLeft、offsetTop、offsetParent，共同组成了offset家族。
1、offsetWidth和offsetHight(是用来检测盒子自身宽高+padding+border)
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
offset宽/高 = 盒子自身的宽/高+ padding +border;
offsetWidth = width+padding+border;
offsetHeight = Height+padding+border;
2、offsetLeft和offsetTop (检测距离父盒子有定位的左/上面的距离)，返回距离上级盒子(带有定位)左边s的位置
如果父级都没有定位则以body为准，offsetLeft从父亲的padding开始算,父亲的border不算。在父盒子有定位的情况下，offsetLeft == style.left(去掉px)
3、offsetParent (检测父系盒子中带有定位的父盒子节点)，返回改对象的父级 (带有定位)
如果当前元素的父级元素没有进行CSS定位(position为absolute或relative，fixed)，offsetParent为body。
如果当前元素的父级元素中有CSS定位(position为absolute或relative，fixed)，offsetParent取最近的那个父级元素。
1.3 offsetLeft和style.left区别
一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。而 style.left不可以
二、offsetTop返回的是数字，而 style.top返回的是字符串，除了数字外还带有单位：px。
三、offsetTop只读，而 style.top可读写。(只读是获取值，可写是赋值)
四、如果没有给 HTML元素指定过 top样式，则style.top返回的是空字符串。
Scroll
1、ScrollWidth和scrollHeight(不包括border)，检测盒子的宽高。(调用者：节点元素。属性。)盒子内容的宽高。(如果有内容超出了，显示内容的高度)，IE567可以比盒子小。 IE8+火狐谷歌不能比盒子小
2、scrollTop和scrollLeft，网页，被浏览器遮挡的头部和左边部分。被卷去的头部和左边部分。
3、他有兼容性问题
一、未声明 DTD(谷歌只认识他)：document.body.scrollTop
二、已经声明DTD(IE678只认识他)：document.documentElement.scrollTop
三、火狐/谷歌/ie9+以上支持的：window.pageYOffset
小知识
onScroll事件：只要页面滚动无论向左向右，向上向下，哪怕只有1px，都会触动这个事件
屏幕跳转：window.scrollTo方法可把内容滚动到指定的坐标。
格式：scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。
client
clientTop、clientLeft：
clientTop：盒子的上boder
clientLeft：盒子的左border
clientWidth与clientHeight
1、在有DTD情况下：
document.body.clientWidth、document.body.clientHeight：显示的是body的宽和高，document.documentElement.clientWidth、document.documentElement.clientHeight：显示的是body可视范围的宽和高，
2、在无DTD情况下：
document.body.clientWidth、document.body.clientHeight显示的是body可视范围的宽和高;
document.documentElement.clientWidth、document.documentElement.clientHeight显示的是body的高和body可视范围的宽(IE中显示的都是body可视范围的宽和高)
3、不管有没有DTD：
window.innerWidth、window.innerHeight：显示的都是浏览器可视范围的宽和高，包括浏览器的头部和滚动条部分(IE678无法识别window.innerWidth)
调用者的区别：
1、clientTop、clientLeft、clientWidth、clientHeight调用者是元素
2、clientX、clientY调用者是event对象
注意：window.screen.width 返回的是我们电脑的分辨率跟浏览器没有关系
小知识
Onresize事件：只要浏览器的大小改变，哪怕1像素，都会触动这个事件。
事件总结
window.onscroll 屏幕滑动
window.onresize 浏览器大小变化
window.onload 页面加载完毕
.onmousemove 鼠标在盒子上移动(注意：不是盒子移动!!!)
onmouseup/onmousedown == onclick
