卡片入口不能只用 margin: 0 auto 居中，因 默认为行内元素，该写法对其无效；即使设 display: block 和宽度，也无法实现垂直居中，且在父容器无明确高度时失效。
卡片入口本质是可点击的链接容器，不是装饰性 div；用 <a></a> 包裹内容并设为块级，再结合 Flex 布局居中，才能兼顾语义、可访问性和响应式表现。
为什么不能只用 margin: 0 auto 居中卡片入口
因为 <a></a> 默认是行内元素，margin: 0 auto 对它无效；强行加 width 也不解决垂直居中，且在无明确父高时会失效。常见错误是给 <a></a> 加 display: block 后只写 margin: 0 auto，结果在移动端错位或贴顶。
正确做法是让父容器承担居中逻辑：
- 父容器设
display: flex+justify-content: center+align-items: center - 父容器必须有高度上下文（如
min-height: 100vh或固定高），否则align-items: center不生效 -
<a></a>本身保持display: block，不设宽高，由内容撑开
<a></a> 卡片入口必须带哪些属性才合格
纯视觉居中只是表象，真正影响可用性的在语义与交互细节：
- 必须有有效
href值（不能是#或空字符串），否则键盘用户无法Tab进入、右键菜单缺失“在新标签页打开” - 若需新窗口打开，必须同时加
target="_blank"和rel="noopener noreferrer"，缺一不可（防安全漏洞） - 卡片内不能嵌套其他可交互元素（如
<button></button>、<input>），否则触发 HTML5 嵌套警告且破坏焦点流 - 必须保障
:focus-visible样式可见（例如a:focus-visible { outline: 2px solid #007bff; }），否则键盘导航时完全看不到焦点位置
图片+文字混合的卡片入口怎么避免错位和白屏
当卡片含 <img> 时，布局容易因加载失败或尺寸未定而塌陷：
- 图片必须带
alt属性（SEO 和可访问性刚需），但别依赖它防白屏——alt不阻止空白占位 - 推荐用
onerror监听 fallback：<img src="icon.png" onerror="this.src='placeholder.svg'" alt="入口图标"> - 若用背景图方式兜底，需加
aria-hidden="true"避免屏幕阅读器误读 - 卡片容器设
min-height（如min-height: 120px），防止图片加载中高度归零导致卡片跳动
hover 和 active 状态不生效的典型原因
很多卡片入口悬停没反馈，不是 CSS 写错了，而是结构或渲染时机问题：
- 没给
<a></a>设display: block或inline-block，导致:hover只作用于文字区域而非整张卡片 - 用了
transform: scale()做 hover 放大，会触发重排，相邻卡片位置偏移，改用box-shadow更稳妥 -
:active效果被快速跳转打断（尤其在移动端），必须加transition: transform 0.1s或background-color 0.1s才能肉眼可见 - CSS 优先级被其他规则覆盖，检查是否被更具体的类名或内联样式压制
最易忽略的一点：卡片入口若放在 <main></main> 外或 DOM 顺序靠后，键盘用户 Tab 时可能直接跳过——确保它在语义流中处于合理位置，且不被 tabindex="-1" 干扰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
