display: none 是唯一能让元素「不可见且不占位」的标准方案，因其彻底移除元素出渲染树，尺寸归零、不响应事件、父容器塌缩；其他方式如 visibility: hidden、opacity: 0 等均存在占位或可交互等缺陷。
display: none 是唯一能让元素「不可见且不占位」的标准方案。其他方式要么占位，要么仍可交互，要么语义或兼容性有缺陷。
为什么只有 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 过渡控制显隐过程
display: none 的实际使用注意点
它不是“设了就完事”的万能开关，尤其在动态场景中容易踩坑：
- 切换后立即触发重排（reflow），动画帧内频繁调用会导致卡顿；避免在
requestAnimationFrame或scroll回调里反复设display: none/block - 元素内的
<video></video>、<iframe></iframe>、第三方脚本不会暂停——音频可能继续播放，统计请求照发 - 若需兼顾屏幕阅读器，建议同步加
aria-hidden="true"（display: none默认已屏蔽读屏，但部分旧版 JAWS 有例外） - JavaScript 中通过
element.style.display = 'none'设置后，再读取getComputedStyle(element).display可能返回'none'，但若该元素原本由 class 控制，直接改style.display会覆盖 CSS 规则，恢复时得小心清空内联样式或切回 class
想过渡隐藏？别只用 display: none
display 属性本身不支持 CSS transition，所以无法实现淡出后消失的效果。正确做法是组合使用：
- 先设
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 或监听 transitionend 后：<br>element.style.opacity = '1';<br>element.style.visibility = 'visible';
hidden 属性能替代 display: none 吗
可以，但要看环境：
- 现代浏览器（Chrome 23+、Firefox 22+、Safari 7.1+、Edge 12+）完全支持，行为与
display: none一致：不占位、不可交互、不被读屏识别 - IE 全系不支持，必须降级为
display: none - 不能用 CSS 控制，比如写
[hidden] { transition: opacity .3s; }无效；也无法用伪类如:not([hidden])精确筛选 - JS 中操作更简洁：
el.hidden = true比el.style.display = 'none'少打字，且不会污染style属性
真正要隐藏且不占位，优先用 display: none；如果项目明确不支持 IE，且追求语义清晰、JS 操作轻量，hidden 是干净的选择——但别指望它能动画。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
