学习前提

完成选择器与层叠课程，能查看开发者工具的计算样式。

本课完成后你能做什么

计算元素总宽度，区分 padding、border 和 margin，解释为什么固定尺寸会导致移动端溢出。

先理解机制

content-box 下设置的 width 只定义内容区，左右内边距与边框还会叠加。例如宽300、内边距各24、边框各1，总边框盒宽度为350。border-box 把这些部分包含在指定宽度里，更便于组件组合。margin 始终在边框盒之外，不会因为改了 box-sizing 就被包含进 width。

高度由内容决定通常比写死高度更稳健。用户增大字体或英文换行变多时，固定 height 容易截断内容。max-width:100% 能限制盒子，但长网址、pre 代码或 flex 子项的自动最小尺寸仍可能造成溢出。解决前先找出真正越界的元素，而不是全局 overflow:hidden 把问题藏起来。

可运行示例

<style>
  * { box-sizing: border-box; }
  .card { width: 300px; max-width: 100%; padding: 24px;
          border: 1px solid #cdd9d1; margin: 24px auto; }
</style>
<article class="card">A simple card</article>

推演与验证

先确认卡片宽度为300，再把 box-sizing 改回 content-box，测量它如何增加到350。将浏览器缩窄，观察 max-width 的作用。接着加入一个非常长的网址：如果仍溢出，应考虑 overflow-wrap 或布局最小尺寸，而不是继续减少普通段落字号。

常见错误与边界

百分比高度需要可确定的参照，否则 height:100% 不一定达到预想结果。垂直 margin 在某些块布局中会折叠，两个20px不一定得到40px间隔。Flex 和 Grid 中可优先用 gap 管理项目间距，让容器负责关系，而不是每个子元素单独猜测间距。

动手练习

做一个最大宽度480px的卡片，在320px视口和200%文字缩放下仍能显示全部文字。写出你采用固定宽度还是最大宽度的理由。

参考解法与理由

使用 width:100%、max-width:480px 和 border-box，让卡片适应父级可用空间；高度保持自动。为正文设置合适的换行策略，代码块可以独立滚动。测试时应检查文档宽度，而不是只看截图中间区域。

<style>.card{box-sizing:border-box;width:100%;max-width:480px;padding:24px;border:1px solid #ccd;overflow-wrap:anywhere}</style>
<article class="card">A flexible card with content-driven height.</article>

进一步阅读