CSS 盒子模型与 box-sizing 属性：代码解析与概念理解
在 CSS 布局中，盒子模型是核心概念，它定义了元素在页面中的占位规则，而 box-sizing 属性则决定了盒子尺寸的计算方式。下面结合具体代码示例进行详细说明。
盒子模型的基本构成
任何元素在页面中都可视为一个 "盒子"，其占位由四部分组成：
- 内容区域（width/height）
- 内边距（padding）
- 边框（border）
- 外边距（margin）
标准盒模型（content-box）
这是 CSS 的默认设置，此时元素的 width 和 height 仅代表内容区域的大小，盒子总占位需叠加 padding、border 和 margin。
以该代码为例：
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
.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
.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 布局的基础技能。
