网页特效中的三大家族offset,scroll,client

1.offset家族

获取元素 '自身' 的真实宽高 和真实 位置

• offsetWidth / offsetHeight : 获取 width+padding+border

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

  !!! 如果父级盒子(包括父级的父级...)有定位 则得到 到父级盒子的距离

  如果都无定位 则得到 到浏览器的距离 !得到的值不带单位

2.scroll家族

获取元素 ‘内容’ 的真实宽高 和 位置

• scrollWidth / scrollHeight : 获取内容的宽高

• scrollLeft / scrollTop : 内容的位置（就是滚动条滚动的距离）

  获取网页滚动距离

  1.给页面注册滚动事件 : window.onscroll

  2.获取页面滚动距离 : document.documentElement.scrollTop

3.client家族

获取元素 ‘可视区域’ 宽高 和 位置 (与offsetWidth不同 获取的宽度 不含边框 但包含padding)

• clientWidth / clientHeight : 可视区域大小
• clientLeft / clientTop : 可视区域位置（就是左边框 和 上边框 宽度）