卡片内按钮应按行为本质选择语义化标签：跳转用<a>，JS交互用<button>；布局用Flex/Grid实现贴底与响应式间距；禁用状态必须用disabled属性，保障可访问性。
卡片内按钮该用 <a> 还是 <button>
取决于行为本质：跳转就用 <a>，触发 JS 就必须用 <button>。混用会破坏键盘导航和屏幕阅读器体验。
常见错误是把功能按钮写成 <a href="javascript:void(0)"> 或直接给 <div> 加 onclick —— 这两类都无法被键盘聚焦，Enter/Space 键不触发，aria-disabled 也无效。
- 真实页面跳转（如
/dashboard、#section2）→ 用<a href="...">，加target="_blank"时务必配rel="noopener" - 展开详情、切换状态、提交表单 → 用
<button type="button">，并显式加aria-label（如aria-label="编辑用户信息"） - 整块卡片可点击 → 把
<a>或<button>设为display: block，包裹所有内容，别用父级div绑事件
按钮在卡片底部固定对齐的 Flex 实现
不是靠 position: absolute 硬塞到底部，而是利用 Flex 的空间分配逻辑让按钮“自动贴底”。关键在父子容器的 flex 层级配合。
错误做法是给按钮设 margin-top: auto 却没控制父容器高度或 flex 方向；更糟的是用 height: 100% 强制拉伸，导致文字截断或图片变形。
立即学习“前端免费学习笔记（深入）”；
- 卡片容器设
display: flex; flex-direction: column; - 内容区（标题+描述）用
flex-grow: 1吸收剩余空间 - 按钮所在容器（如
<footer>或<div class="card-footer">）加margin-top: auto，而非按钮本身 - 避免给卡片设死高度；若需等高，用 Grid 外层布局统一行高，内部 Flex 自适应
多按钮并排时的间距与响应式处理
用 gap 而非 margin 控制按钮间距离，否则在换行或小屏下容易出现边缘空白不一致、最后一项多出空隙等问题。
Flex 或 Grid 容器中，gap 是唯一能真正“跳过容器边界”的间距方案。手动算 margin-right 在不同列数下极易出错。
- 按钮组容器设
display: flex; gap: 8px;（推荐 4–12px 区间） - 小屏下按钮变单列？加媒体查询：
@media (max-width: 480px) { .btn-group { flex-direction: column; gap: 4px; } } - 禁用状态统一用
disabled属性（<button disabled>），不要只靠 CSS 类模拟，否则键盘仍可聚焦 - 图标按钮需保留文字内容，用
visually-hidden类隐藏但不移除文本，保障无障碍
Grid 卡片网格中按钮位置的精确控制
当整页是 display: grid 布局时，按钮位置不该靠父卡片内的绝对定位微调，而应利用 Grid 子项的 grid-column 和 grid-row 直接声明落点。
例如想让按钮始终落在卡片右下角，且不随标题长度变化偏移，就别依赖 flex 的 justify-content: flex-end，而是用 Grid 网格线锚定。
- 卡片设
display: grid; grid-template-rows: auto 1fr auto;（头/体/脚） - 按钮元素加
grid-row: 3; grid-column: -1;（即最后一行、最右侧列） - 若卡片内有图片需保持宽高比，用
aspect-ratio: 16/9+object-fit: cover，避免撑开按钮位置 - 注意：Grid 中
gap作用于卡片之间，不影响卡片内部结构；内部按钮间距仍需单独设gap或margin
