内联样式优先级最高，直接写在标签style属性中，如；类名选择器需通过class定义并配合css规则，如class="btn-lg"配合.btn-lg{font-size:18px;}，复用性强但优先级低于内联样式。
按钮字体大小不生效？检查 CSS 选择器优先级
直接给 <button></button> 写 font-size 却没反应，大概率是样式被覆盖了。浏览器默认样式或外部框架（比如 Bootstrap）可能用更具体的选择器设置了字体，比如 button.btn 或 .btn-primary，它们的优先级高于 button { font-size: 14px; }。
- 用浏览器开发者工具（F12）选中按钮，看“Computed”面板里
font-size的实际值和来源路径 - 如果发现被覆盖，改用更具体的选择器，比如加类名：
.my-btn { font-size: 16px; } - 避免滥用
!important；它能临时压住冲突，但会让后续维护变难
内联 style 和 class 写法效果一样吗？
语法上都能生效，但行为有差异。内联 style="font-size: 18px;" 优先级高于大多数 class，适合快速调试或动态生成场景；而 class 更利于复用和响应式控制。
- 内联写法：
<button style="font-size: 18px;">提交</button> - class 写法：
<button class="btn-lg">提交</button>，配合 CSS：.btn-lg { font-size: 18px; } - 注意：内联样式无法被媒体查询覆盖，响应式要用 class +
@media
font-size 设置 px/em/rem 有什么区别？
单位选错会导致缩放异常或适配失败。px 是绝对单位，em 相对于父元素字体，rem 相对于根元素（html）字体。
- 固定尺寸、需要像素级精准时用
px（如图标按钮文字） - 需要随父容器缩放时用
em（比如嵌套在缩放卡片里的按钮） - 推荐响应式项目用
rem，统一控制基础字号：html { font-size: 16px; }，再设button { font-size: 1rem; } - 别混用：比如父元素
font-size: 0.875em，子按钮再设1.2em，容易算错最终值
按钮文字太小或溢出？别只调 font-size
单纯增大 font-size 可能导致文字撑破按钮、换行错位，尤其在固定宽高的按钮里。
- 同步调整
padding，保持视觉比例：font-size: 16px; padding: 8px 16px; - 用
line-height控制垂直居中（特别是单行文字），避免文字贴顶或下沉 - 遇到文字截断，检查是否设置了
white-space: nowrap或overflow: hidden，这些会掩盖尺寸问题 - 移动端小屏下，
font-size建议不低于14px，否则可读性差且 iOS 可能触发自动缩放
font-size 就完事——得看它在哪、被谁管着、要适配什么设备，还有旁边那些 padding 和 line-height 跟它是不是配合得上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
