offset系列，client系列及scroll系列

offset系列

一、offsetWidth和offsetHeight

获取对象的宽度和高度，包括内容，边框和内边距。即offsetWidth = width+border+padding

注：与div.style.width区别，它只是获取到行内的数值，返回的是字符串，如：100px

二、offsetLeft和offsetTop

距离第一个有定位的父级盒子左边和上边的距离。注：父级如果都没有定位，就以body为准

父级盒子没有定位，会往上追溯，直到body；offsetLeft和offsetTop从父级的padding开始计算（不计border），也就是子盒子边框到定位的父盒子边框的距离。

三、offsetParent

返回当前对象的有定位的父级，若当前对象的父级没有定位，则以body为offsetParent。

注：与parentNode区别。parentNode为当前对象的父级元素

client系列

document.body.clientWidth   网页可见区域宽

document.body.clientHeight  网页可见区域高

一、clientWidth和clientHeight

box.clientWidth   包括内容和内边距。不包括边框。即clientWidth = width+padding

二、clientLeft和clientTop

box.clientLeft   左边边框的宽度

box.clientTop  上边边框的宽度

scroll系列

document.body.scrollWidth  网页正文全文宽

document.body.scrollHeight  网页正文全文高

document.body.scrollTop   网页被卷去的高

document.body.scrollLeft    网页被卷去的左

一、scrollWidth和scrollHeight 

可滚动的内容的宽度和高度

二、scrollLeft和scrollTop

左边滚动的长度和上边滚动的长度

三、scrollTo(X,Y)

把内容滚动到指定的坐标

X: 要在窗口文档显示区左上角显示的文档的x坐标

Y:要在窗口文档显示区左上角显示的文档的y坐标

网页大多数没有水平滚动条，因为x不常用

scroll家的浏览器适配问题

ie9+及最新浏览器

window.pageXOffset ，scrollLeft

window.pageYOffset ，scrollTop

火狐浏览器和其他浏览器

document.documentElement.scrollTop

谷歌浏览器和没有声明 DTD<DOCTYPE>

document.body.scrollTop

兼容写法

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0

var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0

或

function scroll(){
				if(window.pageYOffset != null){
					return {
						top:window.pageYOffset,
						left: window.pageXOffset
					}
				}else if(document.compatMode === 'CSS1Compat'){//标准
					return {
						top:document.documentElement.scrollTop,
						left:document.documentElement.scrollLeft
					}
				}
				return {//ie
					top:document.body.scrollTop,
					left:document.body.scrollLeft
				}
			}

获取屏幕可视区域(宽高)

IE9及其以上版本、最新浏览器

window.innerWidth 和 window.innerHeight

标准模式（w3c）

document.documentElement.clientWidth 和 document.documentElement.clientHeight

怪异模式（ie）

document.body.clientWidth 和 document.body.clientHeight

兼容写法

function WH(){
if(window.innerWidth){//ie9及其以上版本
return {
width:window.innerWidth,
height:window.innerHeight
}
}else if(document.compatMode != 'CSS1Compat'){//怪异模式
return {
width:document.body.clientWidth,
height: document.body.clientHeight
}
}
//标准模式
return {
width:document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}

css盒模型

盒模型分两种：默认为content-box

box-sizing: content-box  w3c标准盒模型

box-sizing: border-box   ie盒模型（怪异盒模型）

标准盒模型：width只包括内容部分

ie盒模型：width包括内容，padding和border