offset与style的区别
offset可以得到任意样式表中的样式值
offset系列的数值没有单位
offsetWidth包含padding+border+width
offsetwidth等属性是只读属性，只能获取，不能赋值
所以，我们想要获取元素大小的位置，用offset更合适
style
style只能获取到行内样式表
stylewidth获得的是带有单位的字符串
style.width不包括padding和border的值
style.width是可读属性，可以获取也可以赋值
点语法与offset获取元素的区别
点语法特点:1.可以获取行内标准属性(主要)
2.可以获取语法动态添加的属性
3.无法获取行内自定义属性
4.无法获取行内属性
offset获取特点:1.可以获取行内外属性
2.获取属性值为number类型，而且不带单位
3.获取到的是页面显示的元素的真实宽高(width/height+padding+border)
三大家族区别（三大家族总结）
1.2.1 Width和height
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度（不包含border）width + padding
scrollHeight = 内容高度（不包含border）
1.2.2 top和left
offsetTop/offsetLeft：
调用者：任意元素。(盒子为主)
作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条)
调用者：document.body.scrollTop/.....(window)
作用：浏览器无法显示的部分（被卷去的部分）。
clientY/clientX:（clientTop/clientLeft 值的是border）
调用者：event.clientX(event)
作用：鼠标距离浏览器可视区域的距离（左、上）。
// width和height
// offset带border
// scroll不带border，内容的宽高
// client不带border
// top和left
// offset距离父系盒子带有定位的盒子之间的距离
// scroll被卷去的部分的距离
// clientborder的宽高
//clientX和clientY
// event调用，鼠标距离浏览器的可视区域的距离
client家族特殊用法之:检浏览器宽/高度(可视区域)
Onresize事件
只要浏览器的大小改变，哪怕1像素，都会触动这个事件。
事件总结
区分：
1.window.onscroll 屏幕滑动
2.window.onresize 浏览器大小变化
3.window.onload 页面加载完毕
4.div.onmousemove 鼠标在盒子上移动
（注意：不是盒子移动！！！）
5.onmouseup/onmousedown == onclick获得屏幕宽高
window.screen.width
分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少。
我们的电脑一般：横向1280个像素点，纵向960个像素点。
我们看电影的时候是满屏和半屏的，就是这。
offset家族:获取元素真实的宽高和位置
console.log(box.offsetWidth);
console.log(box.offsetHeight);
scroll家族: scrollWidth,scrollHeight,scrollLeft,scrollTop
作用是:scrollWidth,scrollHeight获取元素内容的宽高(IE8)
scrollLeft,scrollTop获取元素内容真实的位置
console.log(box.scrollWidth);
console.log(box.scrollHeight);
console.log(box.scrollLeft);
console.log(box.scrollTop);
滚动条滚动事件:onscroll
补充点
offset 指偏移 包括这个元素在文档中占用的所有显示宽度，包括滚动条、padding、border，不包括overflow隐藏的部分
offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的父级元素中最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。
如果当前元素的父级元素中没有进行CSS定位（position为absolute/relative），offsetParent为body
如果当前元素的父级元素中有CSS定位（position为absolute/relative），offsetParent取父级中最近的元素
obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位：像素。
offsetWidth = border-width*2+padding-left+width+padding-right
obj.offsetHeight 指 obj 控件自身的绝对高度，不包括因 overflow 而未显示的部分，也就是其实际占据的高度
offsetHeight = border-width*2+padding-top+height+padding-bottom
obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位：像素。
offsetTop= offsetParent的padding-top + 中间元素的offsetHeight + 当前元素的margin-top
obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位：像素。
offsetLeft= offsetParent的padding-left + 中间元素的offsetWidth + 当前元素的margin-left
scroll指滚动，包括这个元素没显示出来的实际宽度，包括padding，不包括滚动条、border
scrollHeight 获取对象的滚动高度，对象的实际高度；
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth 获取对象的滚动宽度
client指元素本身的可视内容，不包括overflow被折叠起来的部分，不包括滚动条、border，包括padding
clientWidth 对象可见的宽度，不包括滚动条等边线，会随窗口的显示大小改变
clientHeight 对象可见的高度
clientTop、clientLeft 这两个返回的是元素周围边框的厚度，一般它的值就是0。因为滚动条不会出现在顶部或者左侧