display: none 是唯一真正不占空间的隐藏方式，它使元素彻底退出渲染树、尺寸归零、父容器塌缩、周围元素自动补位，且不响应事件；其他方案如 visibility: hidden、opacity: 0 或 absolute 移出均保留占位或触发重排。
display: none 是唯一真正不占空间的隐藏方式
想让元素不可见且完全不占布局空间，display: none 是唯一符合标准的方案。它会把元素彻底从渲染树中移除：它的 offsetWidth 和 offsetHeight 立即变成 0，父容器高度塌缩，周围元素自动填补空缺，也不响应任何事件。
其他看似“隐藏”的写法都不满足「不可见 + 不占位」这个双重要求：
-
visibility: hidden：盒子还在，getBoundingClientRect()返回尺寸不变，tab键仍能 focus 到它 -
opacity: 0：完全透明但点击穿透、offsetHeight非零、子元素也全透明 -
position: absolute; left: -9999px：视觉移出，但仍在文档流中参与计算（比如getClientRects()仍返回非空结果） -
hidden属性：HTML5 原生支持，效果等同于display: none，但 IE 不支持，且不能用 CSS 过渡控制显隐过程
JavaScript 动态设置 display: none 的坑
用 element.style.display = 'none' 看似简单，实际容易出错：
- 如果该元素原本由 class 控制显示状态（比如
.is-hidden { display: none; }），直接改style.display会覆盖 CSS 规则；恢复时得手动清空内联样式或切回 class，否则display: block可能失效 - 切换后立即触发重排（
reflow），在requestAnimationFrame或scroll回调里反复设display: none/block会导致卡顿 - 元素内的
<video>、<iframe>、第三方脚本不会暂停——音频可能继续播放，统计请求照发 - 若需兼顾屏幕阅读器，建议同步加
aria-hidden="true"（虽然display: none默认已屏蔽读屏，但部分旧版 JAWS 有例外）
想做淡出再隐藏？别只靠 display: none
display 属性本身不支持 CSS transition，所以无法实现“先淡出、再消失”的效果。正确做法是组合使用：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 先设
opacity: 0+visibility: hidden，并给opacity加transition - 在
transitionend回调里再设display: none，确保 DOM 真正退出渲染树 - 反向显示时，先设
display: block（或对应值），再设opacity: 1，否则初始帧会闪一下
示例关键代码：
element.style.display = 'block';<br>element.style.opacity = '0';<br>element.style.visibility = 'hidden';<br>// 然后 setTimeout(() => {<br>// element.style.display = 'none';<br>// }, 300);
替代方案里哪些真不占空间？
除了 display: none，还有两个边缘但可用的不占位方案：
-
height: 0; overflow: hidden;：适合固定高度可预测的容器（如手风琴菜单），但需注意 padding/margin 仍可能影响布局 -
clip-path: inset(100%)：裁剪掉全部区域，元素几何尺寸仍存在，但视觉和交互均被切断；兼容性稍弱（IE 不支持，现代浏览器 OK）
这两个方案都不会触发重排，比 display: none 更轻量，但语义和可维护性不如后者。真正要“彻底隐藏+不占位”，display: none 仍是首选，只是得小心它在动态场景里的副作用——尤其是重排和媒体资源未释放的问题。
