直接用内联svg最稳妥，可控性强、无失真、可继承文字色；unicode符号语义弱，字体图标依赖cdn且需无障碍标注；对齐推荐inline-flex+align-items:center，点击区域须扩展至最小24px并配hover/focus样式。
按钮里怎么塞进删除图标（不靠图片）
直接用 Unicode 删除符号或 SVG 图标最稳妥，避免额外请求和缩放失真。✕（×）、✖（✗）或 ⬆（⌫）都能当删除标识，但语义弱；更推荐内联 <svg></svg>，可控性强、颜色尺寸随 CSS 变。
- 别用
<img src="delete.png">——加载失败就只剩空白，且无法响应:hover颜色变化 -
<button><svg viewbox="0 0 16 16"><path d="M3 3h10v2H3V3zm0 4h10v2H3V7zm0 4h10v2H3v-2z"></path></svg></button>这种写法能保证图标始终清晰，且可直接用fill: currentColor继承文字色 - 如果用字体图标（如 Font Awesome），确保 CDN 稳定，且加
aria-hidden="true"，同时配<span class="sr-only">删除</span>供读屏器识别
图标和文字怎么对齐才不歪
默认情况下 <svg></svg> 或 Unicode 符号的基线（baseline）和文字不一致，容易看起来“悬空”或“下沉”。关键不是调 vertical-align 猜，而是统一用 display: inline-flex 或 display: flex 控制内部布局。
- 给按钮设
display: inline-flex; align-items: center; gap: 4px;，再把图标和文字都作为子元素，自动居中对齐 - 如果坚持用行内元素，
vertical-align: middle多数情况可用，但遇到不同字号或字体时仍可能偏移，不如 flex 可靠 - 图标宽度建议设为
1em或固定值如16px，避免在不同font-size下比例失调
点击区域小、图标难点到怎么办
纯图标按钮的热区太小，尤其移动端易误操作。不能只靠增大图标本身，而要扩大可点击范围，同时保持视觉紧凑。
- 给图标外层加
padding（比如padding: 4px 8px），但用box-sizing: content-box防止撑大按钮整体尺寸 - 用
::before或::after伪元素扩展点击热区：比如button .delete-icon::after { content: ""; position: absolute; inset: -4px; }，不占布局空间 - 确保整个按钮有最小尺寸：
min-width: 24px; min-height: 24px;，符合 WCAG 触摸目标要求
删除按钮要不要加 hover/focus 样式
要，而且必须——不仅为体验，更是可访问性硬性要求。没有视觉反馈的删除按钮等于埋雷。
- 鼠标悬停时背景变浅红、图标变深红，用
background-color: #ffebee; color: #c62828;这类低对比但可辨识的组合 - 键盘聚焦（
:focus-visible）必须有清晰轮廓或背景变化，不能仅靠浏览器默认 outline（常被重置掉） - 禁用状态（
disabled）下，除了opacity: 0.5，还得加pointer-events: none和cursor: not-allowed，防止误触发
14px，图标却用了 20px 宽度，就会显得突兀；还有禁用状态下没同步改图标颜色，导致“灰文字+黑图标”的割裂感。这些细节不报错，但用户第一眼就能感知违和。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
