offset 家族
1.offset：偏移、补偿、位移.
offsetParent
1.返回当前对象的带有定位的父级盒子，有可能是父亲，也有可能是爷爷。
注：如果当前的父级元素没有进行定位，offsetParent就为body；如果当前的父级元素有定位，offsetParent就为最近的那个父元素。
offsetHeight与offsetWidth
1.获取的是元素真实的高度和宽度，包括内容、边框和内边距。
2.
offsetHeight = height + border + padding;
offsetWidth = width + border + padding;
3.获取到的是数值类型，方便计算；
4.offsetHeight与offsetWidth是只读属性，不能设置。（获取宽度和高度offsetWidth与offsetHeight ，想要设置盒子的大小，使用style)
offsetLeft与offsetTop
1.offsetLeft: 自身左侧到offsetParent左侧的距离.
2.offsetTop:自身顶部到offsetParent顶部的距离.
3.元素自身与offsetParent真实的距离；
获取到的是数值类型，方便计算；
只读属性，只能获取，不能设置。
scroll 家族
1.获取元素内容的真实宽高，这里是内容，不包括内边距以及border
scrollWidth 与 scrollHeight
1.scrollWidth：页面正文的宽度；
2.scrollHeight：页面正文的高度；
scrollTop 与 scrollLeft
设置或者获取垂直滚动条的位置；
1.scrollTop：页面被卷曲的高度；
2.scrollLeft：页面被卷曲的宽度；
3.scroll家族存在浏览器适配问题，可以使用兼容写法解决；
var scrollTop = window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop || 0;
var scrollleft = window.pageYOffset || document.documentElement.scrollleft
|| document.body.scrollleft || 0;
client 家族
clientWidth与clientHeight
1.document.body.clientWidth：页面可视区域的宽；
2.document.body.clientHeight：页面可视区域的宽；
clientLeft与clientTop
返回的是元素边框的宽度（borderWidth）
1.clientLeft：左边边框的宽度；
2.clientTop：上边边框的宽度；
区分三大家族
left和top：
offset：当前元素距离有定位父盒子的距离；
scroll：滚动的距离；
client：元素的边框宽度；
width和height：
offset：内容 + 内边距 + 边框；
scroll：滚动内容的宽高；
client：内容 + 内边距；（不包括边框）