display: none使按钮彻底消失：从渲染树移除、不占空间、不响应事件、子元素不可见；虽仍存在于dom且表单提交时保留，但无法聚焦、无css过渡、频繁切换触发重排。
display: none 会让按钮彻底“消失”
它从渲染树中被跳过，不占空间、不响应事件、子元素也一并不可见。用 JavaScript 修改 style.display = "none" 后，getBoundingClientRect() 返回宽高全为 0，offsetParent 可能为 null（但要注意：父级也被 display: none 时也会这样，不能单靠这个判断）。
常见错误现象：display: none 的 <button></button> 无法获得焦点，tab 键会跳过它；但它仍存在于 DOM 中，document.getElementById() 能正常取到，表单提交时也依然会被包含在 FormData 里——这点常被忽略。
- 适合场景：弹窗关闭后移除按钮占位、响应式中整块区域隐藏（如小屏下侧边栏按钮）、SEO/屏幕阅读器需跳过该控件
- 不能做 CSS transition：写
transition: display 0.3s完全无效 - 频繁切换会触发重排（reflow），动画中慎用
visibility: hidden 是“隐形但还在原位”
按钮保留原有布局空间，页面不会重排，getComputedStyle(el).visibility 读出来是 "hidden"，但它的子元素可以设 visibility: visible 来“钻出来”显示——这点和 display: none 完全不同。
容易踩的坑：虽然看不见，但默认仍可被 tab 键聚焦（尤其 <button></button> 原生可聚焦），用户键盘导航可能卡在空白处；鼠标 hover 也不触发，除非子元素显式设了 visibility: visible 并配合 pointer-events: auto。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 适合场景：折叠面板渐隐、需要保持容器高度稳定、临时屏蔽但保留 tab 导航路径
- 支持
transition，但只对visible → hidden有延迟隐藏效果；hidden → visible是立即生效 - 若要让某个子按钮可点，得额外加
pointer-events: auto，且注意 Safari 旧版本对此组合支持不稳定
HTML5 hidden 属性是语义化隐藏方式
hidden 是布尔属性，只要存在就生效，等价于 display: none 的渲染效果，但带语义——浏览器和辅助技术会明确知道这是“有意隐藏”，比纯 CSS 更可靠。
JavaScript 控制最简单：el.hidden = true 或 el.hidden = false，不用管样式优先级问题。但它不支持过渡动画，也不能单独控制子元素显隐。
- 与
display: none渲染行为一致，但更语义清晰 - 不触发重排，DOM 节点仍在，
querySelector照常可用 - 不解决可访问性全部问题：仍建议搭配
aria-hidden="true"显式声明（尤其当按钮含重要交互逻辑时）
opacity: 0 + pointer-events: none 才算安全透明
只写 opacity: 0 是危险的：按钮还在文档流里，能被点击、能接收 tab 焦点、屏幕阅读器可能朗读它。必须配对使用 pointer-events: none 和 tabindex="-1"，再加 aria-hidden="true" 才算完整。
性能上它只触发 repaint，不重排，适合高频动画（比如轮播图按钮淡出）。但要注意：pointer-events: none 对 display: none 无效——后者根本不在渲染树里，事件系统压根不扫描。
- 别只依赖
opacity：漏掉pointer-events或tabindex都会导致交互异常 - 动画友好，但语义弱——
hidden或display: none更适合非动画场景 - 如果按钮有 focus 样式，记得同时重置
:focus状态，否则 tab 进去后可能看不到焦点框
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
