最省事用 display: none，但会破坏布局；兼顾体验和可访问性需按场景选方案：display: none 彻底移除元素，hidden 语义清晰但兼容性差，visibility: hidden 保留占位但需配 pointer-events: none，opacity + pointer-events 支持淡入淡出动画。
直接用 display: none 最省事，但会破坏布局节奏；真要兼顾体验和可访问性，得按场景选方案，不是所有“隐藏”都等于“看不见”。
display: none 是最彻底的隐藏，但会触发重排
按钮从渲染树中被完全移除，不占空间、不响应事件、不被屏幕阅读器读取（除非显式加 aria-hidden="false"）。适合确定长期不用、且不影响周边元素定位的按钮。
- JavaScript 控制时写
element.style.display = "none"或切换 class，别漏掉恢复时设回"inline"/"block"—— 仅设空字符串不一定还原原始 display 值 - 如果按钮是 flex 或 grid 容器里的子项，
display: none会导致其他项自动重分布，可能打乱预期对齐 - 服务端渲染或 SSR 场景下，慎用 JS 动态 toggle，避免首屏闪动或 hydration 不一致
hidden 属性语义清晰，但兼容性有坑
hidden 是 HTML5 原生布尔属性，浏览器默认行为等价于 display: none，但语义明确、可被辅助技术识别。问题在于 IE 完全不支持，旧版 Safari 对其 CSS 级联处理不稳定。
- 用 JavaScript 切换推荐写
element.hidden = true，而不是element.setAttribute("hidden", "")—— 后者在部分安卓 WebView 中不触发样式更新 - 不要和
display冲突：若同时写了style="display: block"和hidden，现代浏览器以hidden为准，但老版本 Edge 会优先认 CSS - SSR 框架（如 Next.js）里，服务端渲染出
hidden，客户端 hydrate 时若逻辑没同步，可能短暂可见
visibility: hidden 保留占位，但点击仍可能生效
按钮视觉消失，但仍在文档流中，尺寸和位置不变。常用于动画过渡或临时禁用，但要注意它默认仍响应鼠标事件。
立即学习“前端免费学习笔记（深入）”；
- 必须配
pointer-events: none才真正禁用交互，否则用户点空区域可能意外触发 - 若按钮内含
focus状态（比如用键盘 tab 进入），visibility: hidden不阻止焦点进入，可能造成焦点丢失或卡顿 - 对性能友好：不触发 layout，只触发 paint，比
display: none开销小，适合高频 toggle 场景
opacity + pointer-events 是唯一支持淡入淡出的组合
想加过渡动画？只有 opacity 能被 CSS transition 平滑处理。display 和 hidden 都无法动画，visibility 只能硬切。
- 务必同时设
opacity: 0和pointer-events: none，否则透明按钮仍可点击 - 过渡时间别超过 300ms，否则用户感知延迟明显；起始状态建议用
opacity: 1而非opacity: 0.99，避免 subpixel 渲染异常 - 注意：opacity 为 0 的元素仍占用 tab 键焦点顺序，如需跳过，得额外加
tabindex="-1"
低频按钮不是“藏起来就完事”，重点在用户是否需要感知它的存在、是否可能被误操作、是否影响读屏器理解上下文——这些细节比“怎么写代码”更难调试，也更容易被忽略。
