font-size必须带单位才生效，px适合固定尺寸，em/rem适合响应式；按钮大小由padding与font-size共同决定；disabled状态需用!important覆盖浏览器默认样式；ios safari需重置-webkit-appearance。
font-size 必须带单位，否则无效
直接写 font-size: 16 不会生效——浏览器根本认不出这是字体大小。所有单位都得明写：font-size: 16px、font-size: 1.2em、font-size: 1.1rem。px 最直观，适合固定尺寸；em/rem 更适合响应式场景，但要注意 em 依赖父级、rem 依赖 html 根字号。
常见错误是 JS 动态改样式时漏掉单位：写成 btn.style.fontSize = 18 白费劲；必须是 btn.style.fontSize = '18px'。
别只设 font-size，padding 才决定按钮实际大小
单纯放大 font-size 可能让文字撑出按钮、换行或截断。真正控制按钮“看起来多大”的，是 padding 和 font-size 的组合。优先用 padding: 12px 24px + font-size: 16px，而不是硬设 height: 40px——后者一换字体就错位。
- 移动端至少保证上下
padding≥ 12px，确保点击区域达标 - 长文本按钮（如“导出全部用户数据”）加
white-space: nowrap防折行 - 设了固定
width就得配overflow: hidden和text-overflow: ellipsis，不然文字溢出
disabled 状态下文字颜色会被浏览器强制压暗
哪怕你写了 color: #333，按钮一旦加了 disabled 属性，Chrome/Firefox 会自动把它变灰、变浅，覆盖你的设置。要真想控制禁用态文字色，必须显式写：
button:disabled { color: #999 !important; }
注意：!important 在这里不是偷懒，而是对抗 UA 样式表的必要手段。同时建议补上 cursor: not-allowed 和 opacity: 0.6，让禁用状态更可信。
-webkit-appearance 要重置，尤其 iOS Safari
iOS Safari 给 button 套了一层原生样式壳，会导致自定义 font-size 或 color 在某些机型上不生效，甚至点击无反馈。解决办法是统一加：
button { -webkit-appearance: none; }
加上这句后，记得手动补 cursor: pointer 和 border: none（不同浏览器默认边框粗细不一），否则按钮可能看起来“没反应”或边框突兀。
真正麻烦的是 white-space 和 -webkit-appearance 的组合影响——有时候文字被截断不是因为你没设 width，而是 -webkit-appearance 暗中干预了内联盒模型。这种细节在真机调试前很难暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
