三大家族特点

    (1)获取的是number类型
    (2)只能获取，不能设置

三大家族组成

定义：获取自身真实宽高和位置

属性：

offsetWidth / offsetHeight：获取自身的真实宽高= width + padding + border

offsetLeft / offsetTop：获取左/上外边框到定位父元素的内边框距离

书写规范：元素.offsetWidth

注意事项：打印的是数字，无单位；

定义：获取内容的宽高和位置

属性：

scrollWidth / scrollHeight ：获取内容的宽高

scrollLeft / scrollTop ：获取内容位置，滚动条滚动的距离。

**注意适用场景： **
1.给网页注册滚动事件：window.onscroll
2.获取网页滚动距离html：document.documentElement的scrollLeft/Top

定义：获取可视区域的宽高和位置（rem适配的原理）

属性：

clientWidth / clientHeight：获取元素‘可视区域’的宽高

clientLeft/clientTop : 获取元素‘可视区域’的位置（左边框与右边框）