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

注意：返回的数值都不带单位

offset系列常用属性

offset系列属性	作用
element.offsetTop	返回元素相对带有定位父元素的上方偏移
element.offsetLeft	返回元素相对带有定位父元素的左方偏移
element.offsetWidth	返回自身包括padding、边框、内容区的宽度、返回的数值不带单位
element.offsetHeight	返回自身包括padding、边框、内容区的高度、返回的数值不带单位
element.offsetParent	返回作用在该元素带有定位的父级元素。如果一直向上没找到父级是带定位的，则返回body

元素可视区client系列

client翻译过来就是客户端，通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小(不包括边框)等

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

元素滚动scroll系列

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

scroll系列属性	作用
element.scrollTop	返回`元素`被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回元素被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回元素自身实际宽度（包括超出盒子的宽度)，不含边框，返回的数值不带单位
element.scrollHeight	返回元素自身实际高度（包括超出盒子的高度),不含边框，返回的数值不带单位

注意：元素被卷的头部使用element.scrollTop,如果是页面被卷去的头部则是window.pageYOffset

page属性	作用
window.pageYOffset	获取的是`页面被卷`的头部，与scrllTop是元素被卷不同
window.pageXOffset	获取的是页面被卷的左侧，与scrllLeft是元素被卷不同

三大系列的主要用法

三大系列对比	作用
element.offsetWidth	返回自身内容宽度，包括padding、`包括边框`。返回的数值不带单位
element.clientWidth	返回自身内容宽度，包括padding、`不包括边框`。返回的数值不带单位
element.scrollWidth	返回自身内容包括超出元素的内容大小、包括padding、`不包括边框`、返回的数值不带单位。