button默认样式需先重置appearance、border、background和font，再用flex布局居中；移动端应避免依赖:hover，改用@media或js添加pressed类；禁用状态必须用disabled属性而非opacity；图标对齐推荐flex+gap而非vertical-align。
button 默认样式为什么总“不听使唤”
直接写 padding 或 background 常常无效，不是你 CSS 写错了，而是浏览器给 <button></button> 套了顽固的默认样式。Safari 强制加内边距、Firefox 默认带阴影、Chrome 会继承父级字体——这些都得先清掉。
起步必须加这三行：appearance: none、-webkit-appearance: none、-moz-appearance: none，再紧接着清掉：border: none、background: none、font: inherit。否则后续所有样式调整都像在和浏览器“拔河”。
文字居中别只靠 text-align: center；推荐用 display: flex + align-items: center + justify-content: center，兼容性和控制精度都更稳。
移动端按钮 hover 和 active 状态失效怎么办
手指按压没有视觉反馈，是因为很多移动设备不触发 :hover，且 :active 持续时间极短甚至被忽略。单纯写 button:hover { opacity: 0.8 } 在 iOS 上基本没反应。
解决方法是用媒体查询降级交互反馈：
- 加
@media (hover: none) and (pointer: coarse)切换为:active或自定义 class 触发样式 - 避免依赖
:hover做关键状态提示（比如禁用态仅靠 hover 变灰） - 点击后立即用 JS 添加临时 class（如
is-pressed），配合transition模拟压感
disabled 状态样式为什么总“看起来能点”
用 opacity: 0.5 或 pointer-events: none 模拟禁用，是最多见也最危险的做法：键盘用户仍能用空格/回车激活，屏幕阅读器无法识别状态，且焦点还在可聚焦元素上。
正确做法只有一条：用原生 disabled 属性，并单独定义 button:disabled 样式：
-
cursor: not-allowed明确传达不可操作 -
opacity: 0.6（别低于 0.5，保证可读性） - 移除所有
:hover/:active效果 - JS 控制时只设
element.disabled = true/false，不要手动切 class
按钮里放 SVG 图标后文字不对齐怎么调
<button><svg></svg>提交</button> 这种结构下，SVG 和文字常上下错位，不是 SVG 自身问题，而是 vertical-align 和行高默认行为导致的。
最稳解法是统一用 flex 布局：
- 给
button加display: inline-flex或display: flex -
align-items: center垂直居中 -
gap: 8px控制图标与文字间距（比margin更可靠） - SVG 加
flex-shrink: 0防止被压缩
别用 vertical-align: middle 硬调，不同字号、不同 SVG viewBox 下表现不一致，维护成本高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
