统一使用 box-sizing: border-box 可解决卡片尺寸不一致问题，需全局设置并显式声明于卡片组件，配合图片约束、字体控制及 flex/grid 布局确保对齐稳定。
卡片尺寸不一致，多数是因为默认的 box-sizing: content-box 导致边框、内边距额外增加宽度和高度。统一使用 border-box 是最直接有效的解决方式。
全局设置 border-box 盒模型
在项目入口 CSS（如 reset.css 或 base.css）中，优先应用：
* {
box-sizing: border-box;
}
/* 或更稳妥地包含伪元素 */
*, *::before, *::after {
box-sizing: border-box;
}这样所有元素（包括卡片及其子元素）都会将 padding 和 border 计入设定的宽高内，避免意外溢出或尺寸错位。
卡片容器明确声明宽高与盒模型
即使全局设置了 border-box，仍建议在卡片组件本身显式声明，增强可维护性：
立即学习“前端免费学习笔记（深入）”；
- 用固定宽高（如
width: 300px; height: 200px;）时，内边距和边框不再撑大整体尺寸 - 用百分比或弹性布局（如
flex: 1）时，border-box能确保缩放行为可预期 - 避免只设
max-width却忽略box-sizing，否则响应式下仍可能因 padding/border 累加导致换行或错位
检查卡片内部元素是否破坏布局
常见干扰源：
-
图片未设置
max-width: 100%和height: auto：可能导致溢出卡片边界 - 字体大小或行高过大：在定高卡片中挤压内容，视觉上显得“撑开”
- 子元素用了
margin外边距：尤其是顶部第一个子元素的margin-top可能塌陷或外推卡片 -
未重置列表项或按钮默认样式：如
ul的padding-left或button的默认边框/内边距
配合 flex/grid 布局进一步稳定卡片网格
仅靠 border-box 不足以解决多卡片并排时的对齐问题，建议组合使用：
- 父容器用
display: flex; flex-wrap: wrap;，卡片设flex: 1 1 300px;（响应式基础宽度） - 或使用
display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))，天然规避单卡片尺寸浮动影响整体布局 - 所有卡片统一
margin（推荐用父容器gap替代子元素 margin），避免外边距合并干扰
