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 不一致，视觉上也会不对称。
