盒子模型

css盒子模型

分为两种W3C标准盒子模型和IE盒子模型
盒子模型的组成：margin、border、padding、content。
标准盒子模型的content不包含其他的部分，width的值就是content的大小；IE盒子模型的content包含padding和border，故而width的值就是content+padding+border。
一般情况下，设置文档声明（<!DOCTYPE>）就可以按照标准盒子模型来解析，避免浏览器按照自己的方式去解析盒子模型。
box-sizing包括两个值：content-box和border-box。content-box就相当于标准盒子模型，元素实际宽度等于width+padding+border；而border-box就相当于IE盒子模型，元素实际宽度就等于设置的width的值，表现为怪异模式下的盒模型。

JS盒子模型

1、clientWidth、clientHeight

clientWidth=width+左右padding
clientHeight=height+上下padding
即内容的宽高+padding值
如果没有设置height，容器的高度会根据里面的内容自己进行自适应，这样获取的值就是真实内容的高度，如果设置固定的高度，不管内容是多还是少，内容的高度就是设定的值。

2、clientLeft、clientTop

clientLeft：左边框的宽度
clientTop：上边框的宽度

3、offsetWidth、offsetHeight

offsetWidth=clientWidth+左右边框的宽度
offsetHeight=clientHeight+上下边框的宽度

4、offsetLeft、offsetTop

偏移量：当前盒子的外边框距离父级参照物（offsetParent）的内边框产生的位移。
    offsetParent :  如果父元素存在定位属性(relative,absolute,fixed)那么offsetParent的值就是父元素，否则继续向祖先元素查找。一直会查找到body如果还没有那么就把body作为属性值

5、scrollWidth、scrollHeight

1、如果盒子的内容没有溢出，与clientWidth、clientHeight一致。
2、如果容器中的内容有溢出，scrollWidth=真实内容的宽度（包括溢出的部分）+左padding，scrollHeight=真实内容的高度（包括溢出的部分）+上padding。

6、scrollLeft、scrollTop，前面10个盒子模型都是只读的，这两个是只读写的。滚动条卷去的宽度或者高度。

通过盒子模型获取的属性值都是整数，浏览器获取结果的时候，在原来的真实的结果的基础上四舍五入。

7、当前屏幕的宽度和高度

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight

8、当前页面的的真实高度和宽度

document.documentElement.scrollWidth||document.body.scrollWidth
document.documentElement.scrollHeight||document.body.scrollHeight

获取当前元素距离body的偏移量
function offset(curEle){
var left=curEle.offsetLeft,
	top=curELe.offsetTop,
	par=curELe.offsetParent;
while(par){
	if(navigator.userAgent.indexOf('MSIE 8.0')<=-1){
		left+=par.clentLeft;
		top+=par.clientTop;
		}
	left+=par.offsetLeft;
	top+=par.offsetTop;
	par=par.offsetParent;
	}
return{
	left,
	top
	}
}