优先使用框架原生卡片类（如 bootstrap .card），因其内置样式完整；Tailwind 需组合原子类，推荐 bg-white rounded-lg border border-gray-200 shadow-sm p-4；垂直堆叠用 mb-4+末项 mb-0，Grid/flex 中改用 gap-4 更可靠。
卡片容器用 .card 类还是自定义 div？
多数 css 框架（如 Bootstrap、Tailwind、Bulma）都提供语义化卡片容器类，比如 Bootstrap 的 .card、Tailwind 的 rounded-lg border shadow-sm 组合。直接用框架原生 .card 类最省事，它已内置 padding、border-radius 和 box-shadow；自己写 div 再手动加样式容易漏掉 focus 状态、响应式断点或 dark mode 适配。
但要注意：Bootstrap 5+ 的 .card 默认不设 margin，必须额外加边距类；Tailwind 则完全没预设“卡片”原子类，得靠组合——这时候别硬套命名，直接用 bg-white rounded-lg border border-gray-200 shadow-sm p-4 更可控。
边距类怎么选：mt-4 还是 mb-4？
卡片之间留空，优先用 mb-4（下边距）而非 mt-4（上边距），避免首张卡片顶部多出空白、或嵌套时外层容器意外撑高。若卡片在网格（grid-cols-2）或 Flex 容器中，边距类可能被折叠或失效——此时应改用 gap-4（Grid）或 flex flex-col gap-4（Flex），比单个 margin 更可靠。
-
gap在 Grid/Flex 中自动处理间距，不触发 margin collapse - 多个卡片垂直堆叠时，
mb-4加在每张卡上，最后一张可加mb-0避免多余空白 - 用
mx-auto max-w-md控制单张卡宽度居中，比靠父容器 text-align 更稳定
响应式卡片布局：md:grid-cols-2 为什么没生效？
常见问题是父容器没设 display: grid，光写 md:grid-cols-2 不起作用。Tailwind 要求同时启用 grid + 响应式列数；Bootstrap 则依赖 .row + .col-md-6 配合。
立即学习“前端免费学习笔记（深入）”；
另外注意：某些框架的栅格系统默认有 gutter（间隙），比如 Bootstrap 的 .g-3 会加 1rem 间隙，和你手动加的 mb-4 叠加后显得太松——这时候要么关掉 gutter（.g-0），要么删掉冗余 margin 类。
.cards-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .cards-grid { grid-template-columns: repeat(2, 1fr); } }卡片内容对齐错乱：文字溢出、图片拉伸、按钮跑位
卡片内容区域（如 .card-body 或自定义 div）没设最小高度或 flex 行为，会导致高度不一致、底部按钮错位。解决方法不是固定 height，而是用 flex flex-col justify-between 拉伸内容。
图片常因 width: 100% 在小屏被压缩变形，正确做法是加 Object-fit: cover 并设 aspect-ratio: 16/9（现代浏览器），或用 h-48 w-full object-cover（Tailwind）。
- 标题用
line-clamp-2截断，防文字过长撑开卡片 - 按钮统一放
.card-footer或尾部mt-auto容器里，避免随内容浮动 - 暗色模式下，
bg-white卡片要配dark:bg-gray-800 dark:border-gray-700
实际项目里，最易被忽略的是卡片交互状态：hover 下阴影加深、焦点 outline、禁用态 opacity，这些细节不用框架类就容易漏。与其后期补，不如初始化时就把 transition-all duration-200 和 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-blue-500 加进基础卡片类里。