资讯流卡片语义正确优先选article，但仅适用于独立、可分发、含作者和时间的内容（如新闻、博客）；广告位、推荐位等无独立语义模块应用div，强行套article会干扰屏幕阅读器和seo。
资讯流卡片必须用 article 还是 div？
语义正确优先选 article，但不是所有卡片都适合。只有独立、可分发、有明确作者和时间的内容（比如新闻、博客、产品动态）才该用 article；如果只是广告位、推荐位、运营弹窗这类无独立语义的模块，用 div 更干净，强行套 article 会干扰屏幕阅读器和 SEO。
常见错误：把轮播图里的每张图都包一层 article，或把“猜你喜欢”列表里的每个商品卡片都标为 article——它们既不独立，也不具备发布属性。
-
article内建议至少包含header（含标题）、time（发布时间）、footer（来源/作者） - 若卡片内容由 JS 动态注入且初始 HTML 为空，先用
div占位，等数据加载完成再根据内容类型决定是否替换为article - 同一页面多个
article时，确保每个都有唯一id，方便锚点跳转和 ARIA 关联
CSS Grid 实现三栏自适应卡片流的最小必要写法
不用框架也能稳住对齐，关键是用 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) 而非固定列数。它能自动计算每行最多放几列，且在小屏下退化为单列，比 flex-wrap 更可控。
容易踩的坑：给卡片设固定高度（如 height: 200px）会导致文字截断或图片拉伸；用 min-height 替代，留出呼吸空间。
- 卡片容器加
gap: 1rem，别用margin模拟间距——后者在响应式断点处易错位 - 图片统一用
<img>+object-fit: cover，避免拉伸变形；不要依赖 CSS background-image 做封面图，否则无法设置alt - 字体大小用
rem，行高用无单位数值（如line-height: 1.5），防止嵌套缩放失真
卡片内图片和文字加载顺序导致的布局抖动怎么防？
用户滚动时卡片突然“往下掉”——大概率是图片加载后撑开高度，触发重排。根源不在 CSS，而在资源加载时机和占位控制。
核心解法就两条：用 aspect-ratio 锁定容器宽高比，用 loading="lazy" 配合 decoding="async" 控制解码时机。
- 给图片外层包裹
div设aspect-ratio: 16 / 9，内部img设width: 100%; height: 100%; object-fit: cover - 必须加
width和height属性（即使和 CSS 重复），让浏览器提前知道固有尺寸，防止 CLS（累积布局偏移） - 避免在
img上写style="width:100%"，应统一走 CSS 类，便于媒体查询覆盖
移动端点击卡片区域太小，又不能放大整个卡片怎么办？
卡片本身不宜盲目放大，但点击热区可以扩展。标准做法是把 a 标签从标题/图片上提一层，包裹整个卡片内容，并用 display: block + padding 扩展可点击范围。
注意：不能只靠 touch-action: manipulation 或 -webkit-tap-highlight-color: transparent 来“优化”，这些只是视觉反馈，不解决热区问题。
-
a标签必须包含href，哪怕只是#，否则部分 iOS 版本会忽略点击事件 - 若卡片内已有按钮（如“收藏”“分享”），需用
pointer-events: none禁用其上层遮罩，再对按钮本身设pointer-events: auto - 测试真机时重点看边缘 5mm 区域是否响应，模拟器的点击精度远高于实际手指触控
卡片重构最麻烦的从来不是样式对齐，而是语义层级和加载行为的隐性耦合——一个没设 alt 的封面图，可能让整张卡片在无障碍模式下彻底消失；一段没控制 loading 策略的图片，会在慢网下把卡片流拖成逐帧动画。这些细节不报错，但一上线就暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
