JS中的盒模型

最新推荐文章于 2025-02-18 22:19:14 发布

原创最新推荐文章于 2025-02-18 22:19:14 发布 · 871 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #前端 #html

收录于

本文详细介绍了盒模型的构成，包括content、padding、border和margin，区分了标准盒模型与怪异盒模型，并阐述了box-sizing属性的转换。同时，讲解了如何使用JavaScript获取和设置盒模型的宽高尺寸。

1、盒模型组成

共有四部分组成，分为content（内容区）、padding（填充区）、border（边框区）、margin（边距区）。
在这里插入图片描述

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

主要指的是整个视口的各个参数，详下图
在这里插入图片描述
获取和设置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);