CSS两种盒模型详解：计算公式+代码示例_css计算模型

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

CSS 中有两种盒模型：标准盒模型（W3C盒模型）和怪异盒模型（IE盒模型 / 浏览器前缀盒模型）。这两种盒模型的核心区别在于它们计算元素总宽度和总高度的方式不同。

标准盒模型（W3C盒模型 / content-box）

在标准盒模型中，元素的总宽度和总高度分别由以下几部分组成：

• Content（内容）：元素的实际内容区域，不包括内边距和边框。
• Padding（内边距）：围绕内容区域的空白空间。
• Border（边框）：环绕在内容和内边距外部的边框线。
• Margin（外边距）：元素与其他元素之间的间距。

计算公式：

元素总宽度 = Content + Padding + Border
元素总高度 = Content + Padding + Border
1
2

例如：

.box {
  width: 100px; /* 这里指的是内容区域宽度 */
  padding: 10px;
  box-sizing: content-box; /* 默认为标准模型 */
  border: 5px solid black;
}
1
2
3
4
5
6

在标准盒模型中，.box 的总宽度将是 100px + 2 * 10px (左右内边距) + 2 * 5px (左右边框) = 130px。

怪异盒模型（IE盒模型 / border-box）

在怪异盒模型中，元素的总宽度和总高度包括了内容、内边距和边框的宽度和高度：

• Content（内容）：包含了内边距和边框在内的内容区域的大小。
• Padding（内边距）：内边距添加到内容区域，但不影响元素总尺寸。
• Border（边框）：边框同样添加到内容区域，但不影响元素总尺寸。
• Margin（外边距）：与标准盒模型相同。

计算公式：

元素总宽度 = width (内容 + 内边距 + 边框)
元素总高度 = height (内容 + 内边距 + 边框)
1
2

例如：

.box {
  width: 100px; /* 这里指的是内容区域加内边距加边框的总宽度 */
  box-sizing: border-box; /* 规定使用怪异盒模型 */
  padding: 10px;
  border: 5px solid black;
}
1
2
3
4
5
6

在怪异盒模型中，.box 的总宽度就是设置的 100px，其中已经包含了内边距和边框。

CSS3 引入了 box-sizing 属性，可以切换这两种盒模型的行为。默认情况下，大多数元素遵循标准盒模型，但可通过设置 box-sizing: border-box 改为怪异盒模型。这对于解决跨浏览器的盒模型兼容问题非常有用。