display: grid 是最稳妥的卡片布局起点，需配合 gap、auto-fit/minmax 实现自适应列数，单卡用 flex column 布局并避免固定高度，图片用 object-fit 和 aspect-ratio 保形，悬停用 transform 防重排，阴影与动效需兼顾性能与深色模式。
display: grid 是当前最稳妥的卡片布局起点，别从 float 或 inline-block 开始试——它们在现代浏览器里既难调又容易出错。
卡片容器必须设 display: grid 而不是靠 margin 拼间隙
用 margin 控制卡片间距，会遇到外边距合并、父容器溢出、末尾卡片多出空白等问题。而 gap 是专为网格/弹性布局设计的间隙控制属性，自动跳过边缘，语义清晰。
-
gap: 1.5rem比margin: 1rem更可靠，尤其在响应式换行时 - 必须配合
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))才能真正自适应列数 - 如果只写
repeat(3, 1fr)，小屏下卡片会被强行压缩，文字换行失控 - 不支持
gap的极旧浏览器（IE）基本可忽略，2026 年主流环境已全覆盖
单张卡片内部要用 display: flex; flex-direction: column
很多人给卡片设固定高度或用 position: absolute 去“压”按钮到底部，结果文字一多就撑破、截断、无障碍阅读器读不到顺序。flex column 是唯一能自然撑满又保持语义流的方式。
-
.card { display: flex; flex-direction: column; height: 100%; }是基础 -
.card-body { flex-grow: 1; }让描述区域自动占满剩余空间 -
.card-footer { margin-top: auto; }把按钮/操作区永远推到底部，不依赖高度值 - 千万别给
.card设死高度（如height: 300px），否则 flex 计算失效
图片处理要加 object-fit: cover 和 aspect-ratio
纯 width: 100%; height: 200px 会让不同比例图片被拉伸或留白；只用 height: auto 又会导致卡片高度不一致，整行错位。
-
img { width: 100%; height: 200px; object-fit: cover; }保证裁剪填充 - 加上
aspect-ratio: 4/3（现代浏览器支持）可替代固定高，更灵活 - 不支持
aspect-ratio时，用padding-top: 75%+position: relative+ 绝对定位图片做 fallback -
img { display: block; }必须写，否则底部多出 4px 空隙
悬停动效只用 transform + transition，禁用 top/margin-top
看到很多在线编辑器模板还在用 top: -3px 或 margin-top: -3px 实现上浮效果——这会触发 layout（重排），滚动卡顿明显，尤其在中低端手机上。
- 正确写法：
.card:hover { transform: translateY(-2px); transition: transform 0.2s ease; - 阴影增强可加，但别叠加太多层：
box-shadow: 0 4px 12px rgba(0,0,0,0.12) - 深色模式兼容建议用
color-mix()替代固定 rgba 值，比如：box-shadow: 0 2px 8px color-mix(in srgb, currentColor 12%, transparent); - 过渡时间别超过
0.25s，否则交互反馈变迟钝
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
