一. 元素大小和位置
DOM获取元素大小位置方法主要分为3大家族，由于它们看起来相似但是各自获取的大小位置的细节都有些差别，所以比较容易混淆不好记忆。下面就把它们的具体特性和使用场景进行一个归类总结。
1. scroll家族：
scroll主要使用场景是用来检测页面滚动的距离。
- scrollWidth / scrollHeight：获取元素宽高，包含content+padding
- scrollTop / scrollLeft：获取被卷去的距离，可读写，开发中一般常用于检测页面滚动的距离，使用属性
document.documentElement.scrollTop来检测。
2. offset家族：
offset主要使用场景是用来检测元素到页面边缘的距离，开发中一般用来得到元素在页面中的位置，然后当鼠标页面滚动的距离等于该元素的距离时就触发某些页面特效或鼠标点击自动跳到该元素位置。
- offsetWidth / offsetHeight：包含content+padding+border，注意：由于它获取的是可视宽高，如果盒子是隐藏的，获取的结果就是0
- offsetLeft/offsetTop：获取当前元素相对于父级元素的左、上距离，如果没有则以文档左上角为准；获取出来的是数值，方便计算，只读属性，只能读取使用不能设置。
3. client家族：
一般可以配合窗口尺寸改变window.resize触发事件来检测屏幕宽度改变
- clientWidth / clientHeight：获取元素可见区域的宽高，包含content+padding，不包含滚动条
- offsetLeft / clientTop：获取元素左、上边框的距离，只读属性
