盒模型尺寸：Content-Box 与 Border-Box
理解 box-sizing 如何改变宽度和高度计算中对内边距与边框的包含方式。
盒模型尺寸：Content-Box 与 Border-Box 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
box-sizing 问题
默认情况下，CSS 只对内容区域设置 width。添加内边距或边框会增大元素实际呈现的尺寸，这容易令人困惑，也容易产生错误。
<div class="box">200px + padding + border = 244px rendered</div>
content-box（默认值）
box-sizing: content-box 是默认值。width 和 height 仅应用于内容。内边距和边框会在此基础上额外增加，使元素超出设定尺寸。
border-box
使用 box-sizing: border-box 时，width 和 height 包含内容 + 内边距 + 边框。无论内边距或边框如何设置，元素都会保持声明的确切尺寸。
<div class="box">Exactly 200px rendered width</div>
通用的 border-box 重置
使用通用推荐的重置方式，在全局应用 border-box：
<div class="demo-box">Width stays exactly 200px</div>
为何使用 inherit 而不是 *
另一种模式允许组件在需要时覆盖 box-sizing：
<div class="demo-box">Inherited border-box sizing</div>
百分比宽度 + 内边距
border-box 的主要实际优势体现在百分比宽度上。设置了 20px 内边距的 width: 50% 元素，其宽度仍会恰好保持为父元素的 50%，不会发生溢出。
<div class="col">50% wide column with padding, no overflow</div>
border-box 不包含 margin
即使使用 border-box，声明的宽度也不包含 margin。外边距始终会在元素外部、设定尺寸之外额外占用空间。
历史：为何 content-box 是默认值
过去，各浏览器对盒模型的处理并不一致。W3C 将 content-box 标准化，而 IE 使用 border-box。现代 CSS 为符合 W3C 标准，默认使用 content-box，但几乎所有项目都会将其覆盖为 border-box。
在 DevTools 中检查盒模型
在 Chrome DevTools 中，Elements 面板会显示盒模型示意图，其中包含内容、内边距、边框和外边距的精确尺寸。这是调试尺寸问题最快的方法。
Grid 和 Flexbox 内部使用 border-box
无论元素自身的 box-sizing 设置如何，CSS Grid 和 Flexbox 始终使用 border-box 语义来确定轨道和项目的尺寸。这样可以让它们的尺寸计算保持可预测。
border-box 下的 min/max
min-width、max-width、min-height 和 max-height 的工作方式与 width 相同——启用 border-box 时，它们会包含内边距和边框。
快速检查
使用 box-sizing: border-box 时，一个声明为 width: 300px; padding: 30px; 的元素，其内容区域宽度为：
回顾
box-sizing: border-box 会将内边距和边框包含在声明的宽度中，从而避免尺寸意外增长。使用 *, *::before, *::after { box-sizing: border-box } 在全局应用它。两种盒模型都不会包含外边距。
常见问题解答
「盒模型尺寸：Content-Box 与 Border-Box」课时是免费的吗？
是的 — 「盒模型尺寸：Content-Box 与 Border-Box」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「盒模型尺寸：Content-Box 与 Border-Box」这节课中我会学到什么？
理解 box-sizing 如何改变宽度和高度计算中对内边距与边框的包含方式。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「盒模型尺寸：Content-Box 与 Border-Box」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 理解宽度、高度、外边距与内边距
- 边框样式、宽度与颜色
- 盒模型尺寸：Content-Box 与 Border-Box
- 轮廓与盒阴影