JS中的盒模型

1、盒模型组成

共有四部分组成,分为content(内容区)、padding(填充区)、border(边框区)、margin(边距区)。
JS中的盒模型_第1张图片

2、分类

标准盒模型:
宽度=width+padding(左右的宽度)+border(左右边框宽度)+margin(左右边距)
高度=height+padding(上下的高度)+border(上下边框高度)+margin(上下边距)
怪异盒模型:
宽度=width(padding(左右的宽度)+border(左右边框宽度))+margin(左右边距)
宽度=height(padding(上下的高度)+border(上下边框高度))+margin(上下边距)

3、转换

可通过box-sizing进行转换:
box-sizing:content-box;标准盒模型(默认值)
box-sizing:border-box;怪异盒模型
box-sizing:inherit;继承父级元素

4、JS盒模型

主要指的是整个视口的各个参数,详下图
JS中的盒模型_第2张图片
获取和设置box的宽高
IE:dom.currentStyle.width/height
非IE:window.getComputedStyle(dom).width/height


var obj = document.getElementById("box");

var style = null;
if (window.getComputedStyle) {
    style = window.getComputedStyle(obj, null);    // 非IE
} else { 
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);

你可能感兴趣的:(javascript,前端,html)