CSS盒子模型是描述HTML元素在页面中如何占用空间的核心规则，每个可见的HTML元素都可以看作是一个矩形的盒子，页面布局本质上就是对这些盒子进行排列、调整尺寸和间距的过程。理解盒子模型的组成和计算规则，是掌握CSS布局的基础。
CSS盒子模型的组成结构
标准CSS盒子模型由四个部分组成，从内到外依次是：
- 内容区（content）：盒子内部用来放置文本、图片等实际内容的区域，其尺寸由width和height属性控制。
- 内边距（padding）：内容区和边框之间的空白区域，用来分隔内容和边框，通过padding相关属性设置。
- 边框（border）：包裹在内边距外部的边界线，通过border相关属性设置宽度、样式和颜色。
- 外边距（margin）：盒子和其他盒子之间的空白区域，用来控制元素和相邻元素的间距，通过margin相关属性设置。
两种盒模型的差异
CSS中有两种常见的盒模型，核心差异在于width和height属性计算的范围不同，通过box-sizing属性切换。
标准盒模型（content-box）
这是浏览器的默认盒模型，设置width和height时，仅指定内容区的尺寸，元素实际占用的宽度和高度需要加上内边距和边框的尺寸。
计算公式：
- 元素实际宽度 = width + padding-left + padding-right + border-left-width + border-right-width
- 元素实际高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width
以下代码演示标准盒模型下的尺寸计算：
/* 标准盒模型示例 */
.standard-box {
box-sizing: content-box; /* 默认值，可省略 */
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
}上述元素的内容区是200px*100px，实际宽度为200+20*2+5*2=250px，实际高度为100+20*2+5*2=150px，外边距10px不影响元素自身尺寸，只影响和其他元素的间距。
怪异盒模型（border-box）
怪异盒模型下，设置的width和height会包含内容区、内边距和边框的尺寸，元素实际占用的宽度和高度就是设置的width和height值，内容区的尺寸会自动减去内边距和边框的宽度。
计算公式：
- 内容区宽度 = width - padding-left - padding-right - border-left-width - border-right-width
- 内容区高度 = height - padding-top - padding-bottom - border-top-width - border-bottom-width
以下代码演示怪异盒模型下的尺寸计算：
/* 怪异盒模型示例 */
.border-box {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
}上述元素的实际宽度和高度就是200px*100px，内容区宽度为200-20*2-5*2=150px，内容区高度为100-20*2-5*2=50px，不会因为添加内边距和边框导致元素尺寸超出预期。
盒模型的常见使用场景
在实际开发中，大多数布局场景更适合使用怪异盒模型，因为设置尺寸时更符合直觉，不会因为添加内边距或边框导致元素溢出容器。通常会在全局样式中设置所有元素默认使用border-box：
/* 全局设置怪异盒模型 */
* {
box-sizing: border-box;
}需要注意外边距（margin）在两种盒模型下都不会计入元素的实际尺寸，只会影响元素和其他元素的间距，同时垂直方向上的外边距会出现重叠现象，即相邻两个垂直元素的外边距会取较大的那个值，而不是相加，这是盒子模型的另一个常见特性。
常见问题解答
很多开发者会遇到设置了元素width为100%，又添加了padding导致元素溢出父容器的问题，本质就是使用了默认的标准盒模型，width仅指内容区宽度，加上padding后总宽度超过父容器。此时只需要将元素的box-sizing设置为border-box，就可以让元素的总宽度保持在父容器宽度内，避免溢出问题。
CSS盒子模型box-sizingcontent-boxborder-box盒模型计算规则修改时间：2026-06-04 17:39:00