<p>默认 box-sizing 为 content-box，width/height 仅含内容区，padding 和 border 会额外增加尺寸导致溢出；改为 border-box 后 width 包含 content+padding+border，布局更可控，推荐全局设置 * { box-sizing: border-box; }。</p>
默认情况下，CSS 的 box-sizing 是 content-box，这意味着你设置的 width 和 height 仅指内容区域，而 padding 和 border 会额外增加元素的实际尺寸——这正是导致布局错乱、盒子撑开、响应式失效的常见原因。
为什么 padding 会让元素“变宽”？
比如：div { width: 200px; padding: 20px; }
在 content-box 模式下，它的实际占用宽度是 200px（内容） + 20px（左padding） + 20px（右padding） = 240px。父容器若刚好设为 200px，它就会溢出或换行。
用 border-box 一键解决
把盒模型改为 border-box 后，width 就代表“包括 content + padding + border 的总宽度”，padding 不再往外撑，布局更可控。
- 写法：
box-sizing: border-box; - 推荐全局设置（避免逐个写）：
* { box-sizing: border-box; }
或更稳妥的写法（排除某些替换元素）：*::before, *::after, * { box-sizing: border-box; } - 现代项目中，几乎所有 CSS 重置库（如 Normalize.css）和框架（Bootstrap、Tailwind）都默认启用该设置
注意兼容性与特殊情况
box-sizing: border-box 兼容所有现代浏览器（IE8+），无需前缀。
但需留意：
-
textarea、input[type="button"]等表单控件在部分旧版浏览器中可能表现不一致，建议显式设置 - 使用
min-width或max-width时，它们仍以最终渲染宽度为基准，不受影响 - 当配合
flex或grid布局时，border-box让尺寸计算更符合直觉，尤其在等分列、留白控制时更可靠
基本上就这些。改一个属性，就能让 padding “乖乖待在框里”，布局稳定性和开发效率直接提升。
