box-sizing: border-box 使 width 包含 content、padding 和 border，避免边框撑开宽度；默认 content-box 仅限内容区，加 padding/border 后总宽超预期。
box-sizing: border-box 是什么，为什么能解决边框撑开宽度的问题
元素默认的 box-sizing 是 content-box，这意味着你写的 width: 200px 只管内容区，加上 padding 和 border 后，实际占位就超了。比如 width: 200px; padding: 10px; border: 2px solid #000;，最终宽度是 224px —— 这就是布局错位的根源。
设成 border-box 后，width 指的是“内容 + 内边距 + 边框”的总宽，浏览器自动压缩内容区来凑齐这个值，布局才真正可控。
全局设置 border-box 的推荐写法和兼容性注意点
最稳妥的一次性覆盖方式是用通配符重置，但要注意几个关键细节：
-
* { box-sizing: border-box; }简单直接，但会影响所有元素（包括svg、input[type="range"]等原生控件），某些场景下会破坏默认行为 - 更推荐
*, *::before, *::after { box-sizing: border-box; }，确保伪元素也纳入计算，避免 :before/:after 加了 border 后意外溢出 - IE8+ 支持
box-sizing，但需要加-webkit-box-sizing和-moz-box-sizing前缀（仅当项目还需兼容 IE8–9 时）
哪些地方不能盲目套用 border-box
不是所有元素都适合一刀切。以下情况需单独还原或谨慎处理：
-
textarea和input[type="search"]在部分浏览器中依赖默认content-box行为来对齐内部文字，强行设border-box可能导致光标偏移或行高异常 - 使用了
transform: scale()或zoom的容器内，border-box计算仍按原始尺寸，视觉上可能产生错觉，需结合transform-origin调整 - 第三方 UI 库（如 Ant Design、Element Plus）通常已自行处理
box-sizing，全局重置可能干扰其内部尺寸逻辑，建议优先查文档确认
调试时如何快速验证 box-sizing 是否生效
Chrome DevTools 里看元素样式面板，直接搜 box-sizing 最快。但更实用的是观察“Computed”标签页里的 width 和 border 值：如果 width 显示的是你写的数值（比如 200px），且旁边 border-left-width 明确标出 2px，说明 border-box 已生效；如果 width 显示的是 224px（200 + 2×10 + 2×2），那就是还在 content-box 模式。
一个容易被忽略的点：CSS 优先级。如果你在某个组件里写了 box-sizing: content-box !important，那全局重置就失效了——得去翻具体组件的样式来源，而不是反复检查 reset 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
