display: none 是让按钮彻底不占空间的唯一可靠方式，因其跳过盒模型计算、不生成渲染树节点、不参与布局流，且子元素一并剔除，使页面内容自动收拢填补空缺。
display: none 是让按钮彻底不占空间的唯一可靠方式。其他方法如 visibility: hidden 或 opacity: 0 都会保留布局位置，无法真正“腾出空间”。
为什么 display: none 能真正释放空间？
它让浏览器完全跳过该元素的盒模型计算：不生成渲染树节点、不参与布局流、子元素也一并剔除。页面其余内容会自动“收拢”填补空缺，就像这个按钮从未存在过。
常见错误是误以为 visibility: hidden 更“轻量”——但它仍占据 offsetHeight 和 getBoundingClientRect() 返回的尺寸，父容器高度不会收缩，相邻元素也不会上移。
JavaScript 动态控制 display: none 的坑
用 JS 切换时，必须显式恢复原生 display 值，不能只设为空字符串：
立即学习“前端免费学习笔记（深入）”；
-
btn.style.display = 'none'→ 正确隐藏 -
btn.style.display = ''→ 不会恢复！浏览器不会回退到 HTML 默认值（inline）或 CSS 继承值 - 应写成
btn.style.display = 'inline'或btn.style.display = 'block'（取决于按钮原本的显示类型） - 更稳妥的做法是删掉内联样式：
btn.style.removeProperty('display')
display: none 在框架里怎么配合才不翻车？
在 Vue/React 中，别用仅切 display 的方案（比如 v-show 或 ng-show），它们本质还是靠 display: none 控制显隐，但 DOM 节点始终存在：
- 权限控制类按钮，优先用
v-if/{condition && <button>}</button>—— 直接不创建 DOM，无残留、无事件监听、无内存泄漏 - 频繁切换的按钮（如工具栏开关），
display: none本身没问题，但注意：每次设置都会触发 reflow，若一秒切换几十次，可能卡顿 - 如果按钮绑定了
addEventListener，用display: none不会自动解绑，后续恢复时可能重复绑定
真正要“不占用空间”，就老老实实走 display: none 这条路。它的代价是重排，但换来的是确定性——没有空白、没有穿透点击、没有 tab 键意外停驻。复杂点在于恢复时得知道原来是什么 display 值，这点最容易被忽略。
