最简可用卡片结构为包裹内容，配border-radius设圆角、box-shadow加阴影，无需框架或JS；CSS需设max-width: 100%、width: 300px、img { width: 100%; height: auto; display: block; }防CLS，文字用overflow: hidden; text-overflow: ellipsis; white-space: nowrap;单行截断，响应式推荐display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;。
直接用 <div class="card"> 包内容，配基础 CSS 边框+圆角+阴影就能出效果，不需要框架或 JS。<h3>怎么写最简可用的卡片 HTML 结构</h3>
<p>结构越干净，后期改起来越省事。别套多层 wrapper，也别过早加语义化标签（比如 <code><article></article>）——除非你真要被搜索引擎深度索引。
- 每个卡片用一个
<div class="card">，内部按需放 <code><img>、<h3></h3>、<p></p> -
<img>必须带alt属性，且加width和height（哪怕只是占位值，如width="300" style="max-width:90%"），否则加载时会触发 CLS（累积布局偏移） - 避免用
background-image填充卡片图——它无法懒加载、无 alt、打印不显示、无障碍支持差 - 卡片本身加
max-width: 100%+width: 300px，保证大屏固定、小屏自适应 -
<img>写width: 100%; height: auto;，再加display: block;消除底部间隙 - 标题或描述过长？用
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;单行截断，比line-clamp兼容性更稳 - 卡片内文字区域（如
.card-content）别设height，用padding控制呼吸感，留出触控余量 - Grid 推荐写法：
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;——自动适配列数，gap比margin更可靠 - Flex 推荐写法：
display: flex; flex-wrap: wrap; justify-content: center;，每张卡设flex: 0 0 calc(50% - 1rem)（双列）或calc(33.333% - 1rem)（三列） - 媒体查询只加两档：
@media (max-width: 767px)强制单列，@media (min-width: 1024px)启用三列，中间宽度让浏览器自动过渡，别堆一堆断点 - iOS Safari 默认忽略
:hover，也不放大点击热区；所以别只靠cursor: pointer，得给整张卡片加padding: 1.25rem（至少 20px），提升触控精度 -
transform和box-shadow是唯二推荐用在 hover 上的属性，其他如width、height、margin都会触发重排，卡顿明显 - 按钮类元素（如“查看详情”）别用
<a></a>+margin扩展热区，改用padding，并确保父卡片有role="link"或tabindex="0"保障键盘可访问
CSS 怎么写才不塌、不抖、不溢出
常见错误是只设 width: 300px 就完事，结果小屏上挤成一团，图片拉伸，文字撑破卡片。关键在三点：约束、防塌、截断。
响应式排版用 Flex 还是 Grid
如果只做「小屏单列 → 中屏双列 → 大屏三列」，display: grid 更省心；如果还要兼容 IE11 或需要复杂对齐（比如某张卡跨两行），就退回 display: flex + flex-wrap: wrap。
hover 和点击交互容易忽略的细节
很多人加了 :hover { transform: translateY(-2px); } 就以为完成了，但真机上根本没效果。
真正难的不是写出第一张卡片，而是当内容长度差异极大、图片宽高比不统一、小屏下文字换行错乱时，还能保持视觉节奏一致。这时候别硬调 margin/padding，回过头检查 min-height、aspect-ratio、flex: 1 这几个点是否都到位了。
