offset系列
offsetWidth offsetHeight 获取元素真实的宽高大小（纯数值）
offsetParent 获取距离元素最近的有定位的父节点，如果没有找到，找body
offsetLeft offsetTop 获取元素到offsetParent之间真实的距离（纯数值）
以上的共同点：
都是只读属性，设置无效
如果设置，通过style来设置
scroll家族
成员： scrollWidth scrollHeight scrollLeft scrollTop
scrollWidth scrollHeight 获取元素里面的内容宽高
scrollLeft scrollTop 获取内容卷曲的距离
滚动事件 onscroll 当滚动的时候会触发
获取整个页面的卷曲距离 ==> 有兼容
对老版本的浏览器： 通过html的scrollTop去获取，如果要是获取不到，去通过body的scrollTop去获取
html ==> document.documentElement
document.documentElement.scrollTop
document.body.scrollTop
console.log(document.documentElement.scrollTop || document.body.scrollTop);
新版本浏览器：
window.pageYOffset 获取垂直方向的卷曲距离
window.pageXOffset 获取水平方向的卷曲距离
新老兼容写法
console.log(window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop);
给页面注册滚动事件
建议给window来注册, 这样兼容性最好
client家族
clientWidth clientHeight clientTop clientLeft
clientWidth clientHeight 获取可视区的宽高
clientTop clientLeft 获取元素的上边框、左边框的大小
获取页面可视区的宽高 ==> 有兼容
老版本：通过html的clientWidth ，或者是通过body的clientWidth来获取
console.log(document.documentElement.clientWidth || document.body.clientWidth);
console.log(document.documentElement.clientHeight || document.body.clientHeight);
新版本： window.innerWidth window.innerHeight
新老兼容
console.log(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
onresize 当浏览器的窗口大小发生改变的时候触发
给页面注册， 建议给window注册
window.onresize = function () {
console.log(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
}
三大家族总结
1. offset系列
成员：offsetWidth offsetHeight offsetLeft offsetTop offsetParent
作用：获取元素真实的宽高大小，获取元素到offsetParent之间真实的距离
2. scroll系列
成员：scrollWidth scrollHeight scrollLeft scrollTop
常用的：scrollTop
作用：获取页面的垂直方向的卷曲距离
获取： window.pageYOffset
事件：滚动事件 onscroll
3. client系列
成员：clientWidth clientHeight clientLeft clientTop
常用的：clientWidth clientHeight
作用：获取页面的可视区的宽高
获取： window.innerWidth window.innerHeight
事件：onresize 窗口大小发生改变触发
给页面注册的事件（document、window）
给window注册的
1. window.onscroll
2. window.onresize
3. window.onload
其他的给document注册即可
