CSS 盒子模型与 box-sizing 属性：代码解析与概念理解

3秒一个大2025-11-04 9:57

CSS 盒子模型与 box-sizing 属性：代码解析与概念理解

在 CSS 布局中，盒子模型是核心概念，它定义了元素在页面中的占位规则，而 box-sizing 属性则决定了盒子尺寸的计算方式。下面结合具体代码示例进行详细说明。

盒子模型的基本构成

任何元素在页面中都可视为一个 "盒子"，其占位由四部分组成：

内容区域（width/height）
内边距（padding）
边框（border）
外边距（margin）

标准盒模型（content-box）

这是 CSS 的默认设置，此时元素的 width 和 height 仅代表内容区域的大小，盒子总占位需叠加 padding、border 和 margin。

以该代码为例：

css

css 复制代码

.content-box{
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 20px;
    box-sizing: content-box; /* 默认值 */
}

其实际占位宽度计算为：200px（内容） + 20px×2（左右内边距） + 5px×2（左右边框） + 20px×2（左右外边距） = 290px

怪异盒模型（border-box）

当设置 box-sizing: border-box 时，width 和 height 包含内容、padding 和 border，仅 margin 在外。

同样在该代码中：

css

css 复制代码

.border-box{
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 20px;
    box-sizing: border-box;
}

此时 200px 已包含内容、内边距和边框，实际占位宽度为：200px（内容+内边距+边框） + 20px×2（左右外边距） = 240px

实际布局应用

在多列布局中，border-box 优势明显。如下所示：

css

css 复制代码

.container{
    width: 1200px; /* 容器总宽 */
}
.box{
    box-sizing: border-box;
    width: 580px; /* 包含内边距和边框 */
    margin: 0 10px;
    border: 1px solid #000;
    padding: 5px;
    display: inline-block;
}

两个 .box 元素总占位宽度为 (580 + 10×2)×2 = 1200px，刚好填满容器，避免了因尺寸计算错误导致的布局错乱。

通过控制 box-sizing 属性，可灵活适配不同布局需求，是 CSS 布局的基础技能。