box-sizing 默认值为 content-box 导致宽高计算反直觉，即 width/height 仅指内容区，padding 和 border 额外增加；设为 border-box 后则宽高包含 padding 和 border，更符合设计稿的“总尺寸”预期。
box-sizing 默认值为什么让宽高计算反直觉
浏览器默认用 content-box，这意味着你写 width: 200px，实际占位是 200px + padding + border。设计稿给的是“总宽度 200px”，结果你一加 padding 就撑开，布局立刻错位。
- 常见错误现象：
div { width: 100%; padding: 10px; }导致横向滚动条或子元素换行 - 真实使用场景：响应式栅格、卡片列表、表单控件对齐（比如 input 和 button 并排时高度不一致）
- 兼容性没问题：
box-sizing从 IE8+、所有现代浏览器都支持
全局重置 box-sizing 的安全写法
直接在 *::before 或 *::after 上设 box-sizing 会出问题——伪元素没内容时可能被忽略；用 * { box-sizing: border-box; } 看似简单，但会影响 SVG 元素、某些第三方组件的内建尺寸逻辑。
- 推荐写法：
*, *::before, *::after { box-sizing: border-box; } - 为什么加伪元素：确保 ::before/::after 生成的内容也遵循同一套尺寸规则（比如用伪元素做装饰边框）
- 注意点：重置后，旧代码里那些靠
content-box计算出来的 padding/border 值要重新核对，尤其是 legacy CSS 框架嵌入项目时
border-box 下 padding 和 border 不再“额外加”
设成 border-box 后，width 和 height 指的是“最外沿到最外沿”的总尺寸，padding 和 border 都从这个尺寸里扣。
- 示例对比：
div { width: 200px; padding: 10px; border: 2px solid #000; box-sizing: border-box; }→ 内容区实际只有 176px 宽（200 − 2×10 − 2×2） - 性能无影响：该属性纯属渲染阶段尺寸解析逻辑切换，不触发重排或重绘
- 容易踩的坑：flex 容器中子项设了
flex: 1又加 padding，若父容器没设box-sizing: border-box，padding 会突破 flex 分配的基准宽度
什么时候不该用 border-box
绝大多数情况应该用，但真有例外：需要精确控制内容区域尺寸，且 padding/border 是动态计算或 JS 驱动的场景。
- 典型反例：富文本编辑器内部的
iframe或contenteditable区域，有些库依赖content-box测量光标位置 - SVG 中的
<rect></rect>、<circle></circle>等图形元素不支持box-sizing，设了也无效——别白费劲 - 如果你在调试一个奇怪的 1px 错位，先检查是否某个祖先元素漏了
box-sizing: border-box，而子元素又用了百分比 + padding
box-sizing 不是开关，它是尺寸契约的起点。改它之前，得清楚谁在读这个契约、谁在写这个契约。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
