CSS盒模型如何计算元素的总宽度_盒子宽高公式示例讲解

新闻中心 NEWS CENTER

2025-11-01

浏览次数：次

元素总宽高由盒模型决定，包括content、padding、border、margin；标准模型（content-box）下总宽=width+padding+border+margin，替代模型（border-box）下width包含content、padding和border，更利于布局控制。

css盒模型如何计算元素的总宽度_盒子宽高公式示例讲解

在CSS中，元素的总宽度和高度并不是简单等于设置的width和height，而是由CSS盒模型决定的。盒模型包括四个部分：内容（content）、内边距（padding）、边框（border）和外边距（margin）。其中影响元素占据空间宽高的主要是前三个。

一个元素的实际占用空间计算如下：

在默认的标准盒模型（box-sizing: content-box）下，元素的总宽度为：

总宽度 = width + 左右padding + 左右border + 左右margin
总高度 = height + 上下padding + 上下border + 上下margin

示例：
假设一个div设置如下：

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid #000;
  margin: 20px;
}

那么它的实际占用空间为：

使用box-sizing: border-box可以改变盒模型行为，此时设置的width和height包含了内容、padding 和 border。

BrandCrowd

一个在线Logo免费设计生成器

200 查看详情 BrandCrowd

总宽度 = 设置的 width + 左右margin
总高度 = 设置的 height + 上下margin

示例：
同样的样式，但加上box-sizing: border-box：

div {
  box-sizing: border-box;
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 5px solid #000;
  margin: 20px;
}

此时：

这种模式更符合直觉，常用于布局，避免因加padding或border导致超出容器。

基本上就这些。理解盒模型是掌握页面布局的基础，关键是分清content-box和border-box的区别，并合理使用box-sizing控制计算方式。

以上就是CSS盒模型如何计算元素的总宽度_盒子宽高公式示例讲解的详细内容，更多请关注其它相关文章！

下一篇：移动端混合开发框架原理