一、写在前面
之前一直对于offset，scroll, client这几大属性表示很懵，今天一文针对这些属性进行总结，从此再也不懵逼。
二、offset系列
1、offsetWidth属性

offsetWidth返回当前的元素宽度，这个宽度包括内容的宽度 + border的宽度 + padding的宽度。
offsetWidth是只读属性

2、offsetHeight属性

offsetHeight返回的是当前元素的高度，这个高度包括内容的高度 + border的高度 +
offsetHeight是只读属性

3、offsetLeft属性

offsetLeft属性存在两种情况，一： 如果当前元素没有脱离文档流，此时
offsetLeft表示获取当前元素到定位父元素左侧的距离，如果父元素没有定位，则继续向上查找，知道找到body为止。
二：如果该标签元素脱离文档流，此时offsetLeft = margin-left + left。

4、offsetTop属性：

offsetTop属性存在两种情况：一：如果当前元素没有脱离文档流，此时offsetLeft表示获取当前元素到定位父元素上侧的距离，如果父元素没有定位，则继续向上查找，直到找到body为止。
二、如果该标签元素脱离文档流，此时offsetTop = margin-top + top

5、offsetParent属性：

offsetParent属性表示获取当前元素的最近定位父元素，如果不存在就为body。

三、scroll系列
1、scrollWidth属性

scrollWidth获取元素的实际宽度，包括内容的宽度，和padding的宽度，但是不包括border。

2、scorllHeight属性

scrollHeight获取元素的实际高度，其中包括内容的高度和padding的高度，但是不包括border。

3、scrollTop

scrollTop获取元素向上滚动的距离。

4、scrollLeft

scorllLeft:获取元素向滚动的距离。

5、scroll兼容性问题

1、谷歌，火狐，iE9+支持
document,body.scrollTop/document.body.scrollLeft
2、IE8以下支持
document.documentElement.scrollTop/document.documentElement.scrollLeft
3、火狐/谷歌/iE9+支持
window.pageYOffset/pageXOffset

所以兼容性代码为：

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

四、client
1、clientWidth属性

clientWidth:表示获取可视区域的宽度，不包括边框，不包括滚动条

2、clientHeight属性

clientHeight属性表示可视区域的高度，不包括边框，不包括滚动条。

3、clientLeft属性

clientLeft属性表示左边框的宽度

4、clientTop属性

clientTop：表示上边框的宽度。

5、clientX属性

clientX属性：获取鼠标事件发生时,鼠标距离可视区域的水平坐标。

6、clientY属性

clientY属性：获取鼠标事件发生时，鼠标距离可视区域的垂直坐标。