在CSS初级项目中，统一按钮样式的关键在于建立一个健壮、可复用的 `.btn` 公共类——它必须显式声明 `display: inline-block` 或 `inline-flex`、`font: inherit`、`line-height: 1.5`、`box-sizing: border-box` 和 `outline: none` 等核心重置规则，彻底“打平”浏览器默认样式的差异；所有变体（如禁用、加载、主按钮）均通过修饰类（如 `.btn--disabled`、`.btn--primary`）叠加实现，只覆盖必要属性，避免重复和遗漏；这种约定优于类型选择器或零散定义，让按钮在任何上下文中都保持高度一致、易于维护且真正可靠。
直接定义一个 .btn 类，把颜色、边框、圆角、内边距、字体大小这些基础样式写死，所有按钮都加这个 class。不需要为每个按钮单独写样式，也不推荐用 button[type="submit"] 这类选择器去批量控制——它容易漏掉 或自定义触发组件。
否则在某些布局里（比如 flex 容器中）会表现不一致；更关键的是，inline 默认值会让 width 和 height 失效，导致你设的 padding 看起来“不对劲”。
inline-block兼容性好，IE8+ 都支持inline-flex更适合需要内部对齐（如图标+文字居中）的场景- 别忘了加
vertical-align: middle，避免和文字基线错位
比如禁用态、加载中、危险操作，应该用 .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。
不同浏览器对
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/269274.html