元素滚动scroll系列，元素可视区 client系列，offset

1元素滚动scroll系列

scroll翻译过来就是滚动，我们使用scroll系列的相关属性可以动态的得到该元素的大小，滚动距离等。
element.scrolltop 返回被卷去的上侧距离，返回值不带单位
scrollleft 返回被卷去的左侧距离
scrollwidth 返回自身的实际宽度，不含边框，返回值不带单位
scrollheight 返回自身实际的高度。

页面被卷去头部是window.pageyoffset
元素被卷去头部是element.scrolltop

兼容性问题
申明dtd 使用doucument.documentelement.scrolltop
未声明dtd使用document.body.scrolltop
新方法 windou.pageyoffset ie9开始支持的

function getScroll(){
			return{
				left:window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0,
				top:window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0	
			}
		};
		console.log(getScroll().left)

2元素可视区 client系列

client翻译过来就是客户端，我们使用client系列相关的属性获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素边框的大小，元素的大小等
clienttop 返回元素上边框的大小
clentleft返回元素做边框的大小
clentwidth返回自身包括padding，内容区的宽度，不含边框，返回的数值不带单位
clentheight返回自身包括padding，内容区的宽度，不含边框，返回的数值不带单位

2立即执行函数
（function（）｛｝）（）
或者（function（）｛｝（））
主要作用：创建一个独立的作用域，避免命名冲突

3offset

offset这个属性，可以说是非常有用的，顾名思义，offset翻译过来就是偏移量，从名字就可以看出它的具体意义了。也即是元素相当于父元素的偏移量。

offset大致包括offsetTop、offsetLeft、offsetWidth、offsetHeight、offsetParent五个部分，直白的翻译过来分别是上偏移、左偏移、偏移宽度、偏移高度、偏移父级。翻译虽不够恰当，但仍可体现出其大致意义。

offsetTop: 元素相对父元素上方的偏移

offsetLeft： 元素相对父元素左边框的偏移。

offsetWidth： 自身包括padding 、 边框、内容区的宽度。

offsetHeight： 自身包括padding、边框、内容去的高度。

offsetParent： 作为偏移参照点的父级元素。

其中需要注意的是:

1、offsetTop和offsetLeft都是相对父元素的边框内部的偏移量。也即是元素边框外部到父元素边框内部的距离。

2、offsetParent通常并不是元素的直接上级元素，而是指的离元素最近的设置过position（即position不为static）的父级元素，最多查询到body。即父级元素中不存在设置过position的元素时，其offsetParent为body；position=fixed元素的offsetParent为null；body元素的offsetParent为null。

3、position为fixed的元素，其offsetParent为null，但是计算offsetTop和offsetLeft时，可将其认为是浏览器视口。

4、但对于offsetParent同样为null的body，其offsetTop和offsetLeft永远为0。

5、所有的值都不带单位px，可以直接使用。

6、原生js中有个跟offset作用很类似的函数就是getBoundingClientRect(),它也可以获取元素偏移量和宽高，其中宽高的计算方式相同，但是在计算便宜量时，经过测试此函数永远是相对浏览器视口进行计算的。

offset与style的区别
offset可以得到任意样式表中的样式值
offset系列的数值没有单位
offsetWidth包含padding+border+width
offsetwidth等属性是只读属性，只能获取，不能赋值
所以，我们想要获取元素大小的位置，用offset更合适

style
style只能获取到行内样式表
stylewidth获得的是带有单位的字符串
style.width不包括padding和border的值
style.width是可读属性，可以获取也可以赋值