按钮组合的本质是布局约束与状态隔离，需通过flex/grid容器、position: relative包裹、gap替代margin、同步控制pointer-events与tabindex等实现可靠交互与可访问性。
按钮组合的形态本质是布局 + 状态隔离
按钮组合不是靠堆砌 class 实现的，而是靠容器约束子元素行为、避免状态互相污染。比如 .btn-group 类名本身不定义样式，只提供 flex 容器和边框裁剪逻辑；真正决定“紧凑”“分隔”“垂直”的，是子按钮的 margin 归零方式和 border-radius 分配策略。
- 横向组合必须用
display: flex容器，否则:first-child/:last-child圆角失效（IE11 下伪类对浮动元素不生效） - 垂直组合别用
flex-direction: column硬切，改用display: grid+grid-auto-flow: row，避免 Safari 对flex垂直方向gap的兼容问题 - 禁用
float布局做按钮组——clear行为不可控，且与现代 CSS 交互组件（如Popover）的定位冲突
带下拉的按钮组合必须用 position: relative 包裹
几乎所有框架（Bootstrap、Ant Design、Chakra UI）都要求下拉按钮组合的最外层容器有 position: relative，否则下拉菜单会脱离预期位置。这不是“为了好看”，而是因为 absolute 定位的菜单依赖最近的非 static 祖先作为参照系。
- 错误写法：
<div> <button>主按钮</button><div class="dropdown-menu">...</div> </div>—— 缺少position: relative，菜单在 modal 或 fixed 容器里会飘走 - 正确结构：外层
<div class="btn-group"> 必须含 <code>position: relative，且不能被transform或will-change干扰（这两者会创建新层叠上下文，导致 z-index 失效） - 移动端点击穿透：如果下拉菜单用
visibility: hidden切换而非display: none，iOS Safari 仍会响应底层按钮点击，必须用display控制显隐 - 横向组合中，若按钮有
border: 1px solid #ccc，设gap: 8px实际视觉间距 ≈ 10px（8px gap + 1px 右边框 + 1px 左边框） - 解决方法：统一移除按钮的左右边框（
border-left: none/border-right: none），仅保留首尾按钮的外侧边框；或改用outline模拟边框（不占布局空间） - 不要用负
margin抵消——会导致焦点环错位、屏幕阅读器朗读顺序混乱 -
disabled属性只作用于单个<button></button>，对<a></a>或自定义标签无效；必须额外加pointer-events: none和tabindex: -1 - 组合容器（如
.btn-group）加aria-disabled="true"，否则屏幕阅读器无法感知整组不可用 - 避免用
opacity单独模拟禁用——透明度变化不影响可访问性树，键盘用户仍能聚焦到按钮上
gap 和 border 冲突时优先保 gap
用 gap 控制按钮间距比用 margin 更可靠，但当按钮带边框时，gap 不会自动避让边框宽度，视觉上会显得间距变大。这不是 bug，是 CSS 规范明确的行为：gap 是网格/弹性容器内轨道之间的空隙，不参与边框盒模型计算。
禁用状态组合要同步控制 pointer-events 和 tabindex
只给按钮加 disabled 属性或 opacity: 0.5 不够。组合场景下，禁用必须阻断整个组的交互流，包括键盘 Tab 跳转、鼠标悬停反馈、焦点管理。
立即学习“前端免费学习笔记（深入）”；
min-width 控制和禁用状态下焦点环的清除逻辑。这两个点不报错，但一上线就会被 QA 或残障用户直接打回来。
