button 默认样式与设计稿不符源于浏览器 UA 样式干扰，需重置 border、padding、background、font 并加 appearance: none 和 cursor: pointer；focus outline 应替换而非删除，SVG 图标需 flex 布局或 vertical-align 对齐；disabled 状态须用原生 disabled 属性并单独处理 :disabled:focus。
button 元素默认样式为什么总和设计稿对不上
因为浏览器自带 user agent stylesheet 会给 <button> 加一堆“隐形约束”：内边距、边框、字体继承、垂直对齐、甚至 focus outline。Chrome 和 Firefox 对 button 的 line-height 和 padding 默认值还不一样，直接写 <button>点击</button> 几乎必然需要重置。
- 必须显式设置
border、padding、background、font，否则会受 UA 样式干扰 -
appearance: none要加，不然 Safari 会坚持渲染原生金属质感（尤其 macOS） -
cursor: pointer别漏，否则 hover 时鼠标没反馈，用户会以为点不动 - 如果用图标+文字，
vertical-align: middle或display: flex更稳，纯line-height对齐在不同字体下容易偏移
怎么让 button 点击后不出现蓝色外框（outline）
那个蓝框是可访问性必需的 focus outline，不能粗暴 outline: none —— 屏幕阅读器用户和键盘操作者会丢掉焦点位置。正确做法是「替换」而非「删除」。
- 用
outline: 2px solid #007bff换成和品牌色一致的轮廓，宽度建议 ≥2px - 配合
outline-offset: 2px让轮廓离按钮稍远一点，视觉更清爽 - 只在键盘聚焦时显示：用
:focus:not(:focus-visible)配合:focus-visible做渐进增强（Chrome/Firefox 支持） - 绝对不要写
*:focus { outline: none }，这是 WCAG 2.4.7 不合规行为
button 内部放 SVG 图标时常见错位问题
SVG 默认是 display: inline，基线对齐（baseline），和文字混排时会下沉，看起来像“没居中”。这不是 bug，是 CSS 行内元素的正常表现。
- 给 SVG 加
vertical-align: -0.125em（或middle）能快速修正，但不同字体下数值要微调 - 更可靠的是把
button设为display: flex，再用align-items: center+gap: 4px控制图文间距 - SVG 必须带
width和height属性（哪怕只是1em），否则在缩放或 font-size 变化时可能塌陷 - 避免用
img标签引入 SVG，它会触发额外 HTTP 请求且无法内联样式；直接写<svg></svg>或用 background-image
禁用状态（disabled）的 button 为什么还是能被 tab 到
只要 DOM 中存在 disabled 属性，该 button 就不会出现在 tab 顺序里 —— 如果你还能 tab 到，说明它根本没被真正禁用。
立即学习“前端免费学习笔记（深入）”；
- 检查是否误用了
disabled="false"（这等于没禁用），正确写法只有disabled或disabled="" - 用 JavaScript 动态控制时，别只改 class，必须操作
el.disabled = true，否则键盘无法跳过 - 禁用样式别只靠 opacity，要加
pointer-events: none防止意外点击，同时设cursor: not-allowed - 如果用了
aria-disabled="true"却没加原生disabled，屏幕阅读器可能读作“已禁用”，但键盘仍可聚焦 —— 二者必须同步
:disabled:focus 选择器单独清空 outline，而不是依赖全局重置。 
