<p>默认 box-sizing 为 content-box，width/height 仅含内容区，padding/border 会额外增加尺寸；改用 border-box 后 width/height 表示整体占位尺寸（content+padding+border），推荐全局设置 * { box-sizing: border-box; }。</p>
默认情况下，CSS 的 box-sizing 是 content-box，这意味着你设置的 width 和 height 只包含内容区域，而 padding 和 border 会额外增加元素的总尺寸。这常导致布局错位、容器溢出或响应式失效。
用 border-box 统一盒模型
将盒模型切换为 border-box 后，width 和 height 就表示元素的**整体占位尺寸**（含 content + padding + border），内边距不再“撑大”盒子。
- 写法：
box-sizing: border-box; - 推荐全局设置，避免逐个添加：
这样所有元素（包括伪元素）都按 border-box 计算，后续设置 width: 100% 或固定像素时更可预期。
注意继承与重置
box-sizing 不会自动继承，但通过通配符 * 设置后，子元素会沿用该值。不过某些组件库或重置样式（如 Normalize.css）可能已显式设为 content-box，需检查并覆盖。
立即学习“前端免费学习笔记（深入）”；
- 若局部需要 content-box（极少见），可手动重设：
box-sizing: content-box; - 表单控件（如
input,textarea）在部分浏览器中默认是 content-box，建议统一重写
配合 calc() 灵活微调
即使用了 border-box，有时仍需精确控制内容区宽度（比如留出固定 padding 后填满父容器）。可用 calc() 辅助：
但更推荐直接设 padding，再让 width: 100% 自动适配——因为 border-box 已把 padding 算进去了，无需手动减。
验证是否生效
在浏览器开发者工具中选中元素，查看“Computed”面板里的 box-sizing 值；同时观察“Metrics”面板：当 padding 增加时，若 width 对应的蓝色区域（总宽度）不变，说明 border-box 已生效。
- 常见误判：只看 Styles 面板写了
box-sizing: border-box，但被更高优先级规则覆盖 - 调试技巧：临时加个
border: 1px solid red，直观感受 padding 是否还在“撑开”盒子
