box-sizing 默认为 content-box，border 会撑大元素尺寸；改用 border-box 可将 border 计入 width，推荐全局设置 * { box-sizing: border-box; }，但需注意表单控件兼容性。
border 会撑大元素尺寸，这是 box-sizing 的默认行为
当给一个 width: 200px 的元素加 border: 5px solid red，实际占用的水平空间是 210px（200 + 左右 border 各 5px）。这不是 bug，而是 W3C 盒模型的默认规则：border 和 padding 都在 width 和 height 之外计算。
常见错误现象：
- 响应式布局中元素突然换行或溢出容器
- Grid 或 Flex 子项尺寸失控，对不齐
- 用 JavaScript 读取
offsetWidth得到意外值
用 box-sizing: border-box 强制把 border 算进 width 里
这是最直接有效的解法。设置后，width 指的是「内容 + padding + border」的总宽，浏览器自动压缩内容区来腾出 border 空间。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局重置推荐写法：
* { box-sizing: border-box; }，但注意、等表单控件在某些旧版 Safari 中可能有渲染异常，可单独重置为content-box - 只针对特定组件时，直接加在类上，比如：
.card { box-sizing: border-box; width: 300px; border: 2px solid #ccc; } - 不要混用：同一项目中避免部分组件用
border-box、部分用默认，容易引发尺寸推导混乱
flex 或 grid 布局中 border 导致错位，优先检查 flex-basis 或 grid-template-columns
即使用了 box-sizing: border-box，在 Flex 容器中，如果子项设了 flex-basis: 200px 且带 border，仍可能因主轴剩余空间分配逻辑产生微小偏差；Grid 中 grid-template-columns: 1fr 1fr 的列若 border 不一致，视觉上也会不对称。
关键点：
-
flex-basis的计算基准仍是盒模型尺寸，所以它也受box-sizing影响 —— 必须确保子项已设box-sizing: border-box - Grid 列宽建议用
minmax(0, 1fr)替代纯1fr，防止 border + padding 撑开导致内容溢出 - 调试时用浏览器开发者工具的「Layout」面板，勾选「Show box model」，直观查看 border 是否被计入尺寸框内
需要动态控制 border 显隐时，别用 display: none 切换
用 display: none 隐藏 border 会导致元素尺寸突变（border 消失 → width 缩小 → 布局抖动），尤其在动画或交互反馈中非常明显。
更稳妥的做法：
- 用
border-color: transparent或border-width: 0替代display: none，保持盒模型结构稳定 - 如果 border 样式复杂（如
border-image），改用visibility: hidden配合pointer-events: none控制交互，避免重排 - 动画场景下，
border属性本身不支持平滑过渡，应改用outline或伪元素模拟，或借助transform: scale()视觉逼近
真正麻烦的不是 border 本身，而是它和 width/height/flex-basis 这些属性在不同盒模型下的耦合关系。一旦漏掉某处 box-sizing，或者在 JS 中直接读写 offsetWidth 却没考虑当前样式状态，就很容易陷入“明明写了 200px 为什么就是不对”的循环。
