盒子模型
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
}
}