根本原因是box-sizing默认为content-box，导致width仅控制内容区，padding和border额外叠加使总宽超出预期，破坏栅格对齐与flex布局。
根本原因不是边框“画错了”，而是 box-sizing 默认为 content-box，导致你写的 width 只管内容区，padding 和 border 额外加在外面——设计稿量的是总宽，浏览器却按内容宽 + 边框 + 内边距来占位。
为什么写了 width: 300px，实际却变成 312px？
假设卡片设了 width: 300px、padding: 8px、border: 2px solid #ddd，在 box-sizing: content-box 下，总宽 = 300 + 8×2 + 2×2 = 312px。这个差值会直接破坏栅格对齐，尤其当多张卡片并排或嵌套在 flex/grid 容器中时，换行点、间隙、列数全都会偏移。
- 开发者工具里看 “Computed” 面板的
width值，和你写的width不一致，基本就是box-sizing搞的鬼 - 表单控件（如
input、select）在部分浏览器里仍继承content-box，混排时特别容易错位 - 第三方 UI 库若没重置
box-sizing，其内部 padding/border 会叠加在你写的 width 上
flex 卡片里 border 加上后突然换行或挤出容器
flex 子项默认受 flex-shrink: 1 影响，而 content-box 下的 border 会让元素“意外变宽”，触发压缩逻辑——但压缩又常被图片、长单词等 min-content 阻止，最终表现为某张卡独占一行、或右侧卡片被挤出父容器。
- 给卡片加
flex: 0 0 auto或显式flex-basis，避免width被忽略 - 必须配合
box-sizing: border-box，否则flex-basis算的还是内容宽，border 依然额外加 - 用
gap替代margin控制卡片间距，避免边框+margin 双重叠加
如何安全地改边框又不破坏布局？
最稳妥的做法是全局启用 border-box，再用透明边框预留变化空间——这样 hover 加边框、主题切换换色，都不会引发重排抖动。
- 把这段代码放在所有 CSS 最顶部：
*, *::before, *::after { box-sizing: border-box; } - 如果不能全局改（比如维护老项目），至少给卡片类组件单独加：
.card { box-sizing: border-box; } - 需要边框“出现/消失”动画：初始写
border: 2px solid transparent，只变border-color，宽度始终参与布局计算 - 慎用
outline替代border：它不占布局空间，但不支持圆角、无法单独设某一边、focus 状态下可能被系统高对比度模式覆盖
真正难处理的不是边框本身，而是它和 flex-basis、min-width、gap 这几者的组合效果——尤其在 iOS Safari 下，min-width: 0 有时得降级成 min-width: 1px 才能生效，这些细节不验证就上线，很容易在小屏上突然崩掉整行卡片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
