CSS 盒模型与 box-sizing：掌握布局核心
什么是 CSS 盒模型？
每个 HTML 元素都是一个"盒子"，由四部分组成：
- 内容区（Content）：文本、图片等实际内容
- 内边距（Padding）：内容与边框之间的空白
- 边框（Border）：围绕内容和内边距的线条
- 外边距（Margin）：盒子与其他元素的间距
注意：
margin不计入元素实际尺寸
两种盒模型对比
1. content-box（默认）
width和height只包含内容区- 实际宽度 =
width + padding + border
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
}
/* 实际宽度 = 200 + 20×2 + 5×2 = 250px */
2. border-box（推荐）
width和height包含内容、padding 和 border- 实际宽度 = 设置的
width
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid black;
}
/* 实际宽度 = 200px */
视觉对比示例
<div class="box border-box">border-box</div>
<div class="box content-box">content-box</div>
<style>
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid black;
margin: 20px;
}
.border-box {
box-sizing: border-box;
background: lightblue;
}
.content-box {
background: lightgreen;
}
</style>
效果：
- 蓝色盒子（border-box）总宽度严格为 200px
- 绿色盒子（content-box）总宽度为 250px
为什么推荐 border-box？
布局场景对比
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
</div>
<style>
.container {
width: 1200px;
margin: 0 auto;
}
.box {
box-sizing: border-box; /* 关键！ */
width: 580px;
padding: 5px;
border: 1px solid #000;
display: inline-block;
}
</style>
优势：
- 布局计算更直观
- 避免因 padding 和 border 导致布局错位
- 与现代布局技术（Flexbox、Grid）配合更好
最佳实践
全局设置
*, *::before, *::after {
box-sizing: border-box;
}
content-box 使用场景
- 需要精确控制内容区域尺寸时
- 日常开发中较少使用
总结
| 特性 | content-box | border-box |
|---|---|---|
| 尺寸计算 | 仅内容区 | 内容+padding+border |
| 布局可控性 | 较弱 | 强 |
| 推荐程度 | 不推荐 | 推荐 |
CSS 盒模型是前端布局的基石，理解 content-box 与 border-box 的差异至关重要。默认的 content-box 会导致元素实际尺寸超出预期，给布局带来不确定性；而 border-box 将 padding 和 border 纳入 width/height 的计算范围，使尺寸控制更直观、布局更稳定。
在现代 Web 开发中，全局重置 box-sizing: border-box 已成为行业最佳实践。它不仅简化了响应式设计和组件开发，还能有效避免因盒模型误解导致的错位问题。掌握这一特性，是写出可预测、易维护布局代码的关键一步。
