box-sizing: border-box 是唯一能真正让边框不改变元素占位大小的方案，因其使 width/height 包含内容、内边距和边框；默认 content-box 模型下 width/height 仅限内容区，border 和 padding 额外叠加导致尺寸膨胀，如 width: 200px; border: 2px solid 时实际宽为 204px。
box-sizing: border-box 是唯一能真正让边框不改变元素占位大小的方案。其他方法（如 box-shadow、伪元素）只是视觉模拟，不参与盒模型计算，也不能响应交互。
为什么默认边框会撑开尺寸？
浏览器默认用 content-box 盒模型：你写的 width 和 height 只算内容区，border 和 padding 额外加在外部。比如 width: 200px; border: 2px solid;，实际宽度是 204px。
这不是 bug，而是 CSS2.1 的规范行为。只要没显式切换盒模型，所有原生元素（包括 input、textarea、img）都按这个逻辑渲染。
必须全局设置 box-sizing: border-box
只给个别元素加 box-sizing: border-box 容易漏掉关键节点：
- 伪元素（
::before/::after）默认仍是content-box，必须一并覆盖：*::before, *::after - 表单控件在旧版 Safari 或某些 Android WebView 中可能回退，建议额外加固：
input, textarea, button { box-sizing: border-box; } - 必须放在 CSS 文件最顶部，否则会被后续样式覆盖
- 不要写
-webkit-或-moz-前缀——所有现代浏览器（含 IE8+）已原生支持该属性
flex/grid 中边框仍“撑开”？检查 min-width
即使设了 box-sizing: border-box，在 display: flex 或 grid 容器里，子项仍可能因边框换行或错位。这不是盒模型失效，而是 flex/grid 按“固有尺寸”分配空间，而边框会影响这个计算。
解决办法很简单：
- 对水平流子项加
min-width: 0 - 对垂直流子项加
min-height: 0 - 仅靠
overflow: hidden不够——它只裁剪内容，不改变尺寸参与计算的过程
别用 box-shadow 或伪元素“凑”内边框
它们看起来像边框，但本质不同：
-
box-shadow: 0 0 0 2px #000不占布局空间，但无法做虚线、双线，:hover改颜色会失效（阴影不是边框） - 伪元素边框要手动同步
border-radius、transform等，父容器一旦有transform或非static定位，就容易错位 - 两者都不响应
:focus、不被屏幕阅读器识别，打印时可能丢失
真正需要语义化边框（比如表单校验、可访问性焦点环），只能走 box-sizing: border-box 这条路——其余都是妥协方案，且容易在缩放、高 DPI、响应式断点下暴露问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
