css 初级项目中按钮样式怎么统一_通过公共 class 复用样式实现

按钮样式应统一使用 .btn 公共类，显式声明 display: inline-block 或 inline-flex、font: inherit、line-height: 1.5、box-sizing: border-box 和 outline: none，并通过 .btn--disabled 等修饰类扩展状态样式，避免浏览器默认样式干扰。

按钮样式统一用 .btn 公共类就够了

直接定义一个 .btn 类，把颜色、边框、圆角、内边距、字体大小这些基础样式写死，所有按钮都加这个 class。不需要为每个按钮单独写样式，也不推荐用 button[type="submit"] 这类选择器去批量控制——它容易漏掉 或自定义触发组件。

.btn 必须声明 display: inline-flex 或 display: inline-block

否则在某些布局里（比如 flex 容器中）会表现不一致；更关键的是，inline 默认值会让 width 和 height 失效，导致你设的 padding 看起来“不对劲”。

• inline-block 兼容性好，IE8+ 都支持
• inline-flex 更适合需要内部对齐（如图标+文字居中）的场景
• 别忘了加 vertical-align: middle，避免和文字基线错位

状态样式靠修饰类组合，不是重写整个 .btn

比如禁用态、加载中、危险操作，应该用 .btn.btn--disabled、.btn.btn--loading 这种方式扩展，而不是写一堆独立的 .btn-disabled。这样既保持主样式稳定，又方便叠加：

.btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background: #fff;
  color: #333;
  cursor: pointer;
}

.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn--primary {
  background: #007bff;
  color: white;
  border-color: #007bff;
}

注意：.btn--primary 只改背景、文字、边框色，其他属性继承 .btn，避免重复声明 padding 或 border-radius。

小心 button 的默认样式干扰复用

不同浏览器对 的默认 padding、font-size、line-height 处理不一致，直接套 .btn 可能出现高度参差。必须显式重置：

• 加 font: inherit 继承父级字体设置
• 明确写 line-height: 1.5（不要依赖默认值）
• 用 box-sizing: border-box 确保 padding 不撑大尺寸
• 移除 outline（聚焦时用 :focus-visible 单独处理）

统一这事，难点不在写多少样式，而在于有没有把默认行为“打平”——漏掉任意一项，都可能让某个按钮在某个页面里突然矮半像素或文字偏上。