元素偏移量 offset 、元素可视区 client 、元素滚动 scroll

1.元素偏移量offset

offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

1. 获得元素距离带有定位父元素的位置
2. 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位

属性	作用
element.offsetParent	返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
element.offsetTop	返回作为该元素带有定位的父元素上级的偏移
element.offsetLeft	返回作为该元素带有定位的父元素左边框的偏移
element.offsetWidth	返回自身padding、边框、内容区的宽度，返回的数值不带单位
element.offsetHeight	返回自身padding、边框、内容区的高度，返回的数值不带单位

2.元素可视区client

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身padding、内容区的宽度，不包含边框返回的数值不带单位
element.clientHeight	返回自身padding、内容区的宽度，不包含边框返回的数值不带单位

3.元素滚动scroll

scroll 翻译过来就是滚动的，我们使用 scroll 系列的相关属性可以动态的得到该元素的大小、滚动距离等。

属性	作用
element.scrollTop	返回被卷去的上方距离
element.scrollLeft	返回被卷去的左边距离
element.scrollWidth	返回自身实际宽度，不包含边框返回的数值不带单位
element.scrollHeight	返回自身实际高度，不包含边框返回的数值不带单位

如果浏览器的高（或宽）度不足以显示整个页面时，会自动出现滚动条。当滚动条向下滚动时，页面上面被隐藏掉的高度，我们就称为页面被卷去的头部。滚动条在滚动时会触发 onscroll事件。

它们的主要用法

1.offset系列 经常用于获得元素位置 offsetLeft offsetTop

2.client经常用于获取元素大小 clientWidth clientHeight

3.scroll 经常用于获取滚动距离 scrollTop scrollLeft

4.注意页面滚动的距离通过 window.pageXOffset 获得