卡片边框错位主因是默认 content-box 导致 padding 和 border 额外增加宽高，解决方法是全局设置 box-sizing: border-box；需统一间距策略、确保 flex 对齐、处理内容高度不均，并用开发者工具验证。
卡片边框错位，多数是因为盒模型默认使用 content-box，导致 padding 和 border 额外增加元素总宽高，破坏了等宽/等高的布局对齐。解决核心是统一用 box-sizing: border-box。
为什么错位？content-box 的陷阱
默认情况下，一个设了 width: 300px; padding: 16px; border: 1px solid #ccc; 的卡片，实际占用宽度是 300 + 16×2 + 1×2 = 334px。多张卡片并排时，哪怕 CSS 写的 width 相同，真实尺寸却不同，尤其在 flex 或 grid 中容易出现换行、间隙不均、底部不对齐等问题。
全局启用 border-box 最省心
在项目入口 CSS（如 base.css 或 reset.css）里加这一段，一劳永逸：
*, *::before, *::after {
box-sizing: border-box;
}
这样所有元素（包括伪元素）都按「设定的 width/height 包含 padding 和 border」来计算，卡片尺寸严格可控。
立即学习“前端免费学习笔记（深入）”；
卡片布局中还需注意的细节
-
避免混用 margin 和 padding 控制间距：统一用 padding 内部留白 + margin 外部间隔，并确保父容器无意外的
gap或justify-content偏移 -
flex 容器记得设
align-items: stretch（默认值），否则卡片高度不一致时边框底端会参差不齐 -
图片或内容高度不固定时，给卡片加
min-height或使用display: flex; flex-direction: column配合flex: 1拉伸主体区域，保证视觉高度一致
检查是否生效的小技巧
在浏览器开发者工具中选中卡片元素，看「Computed」面板里的 width 和 border-box size 是否一致；或者临时加一句 outline: 2px dashed red; —— outline 不参与盒模型计算，能直观对比真实占位和预期是否吻合。
