display: none 是唯一真正让元素“不占空间”的 css 方式，它使元素退出文档流、不参与布局计算、不渲染、尺寸属性返回 0，且屏幕阅读器默认忽略。
display: none 是唯一能真正让元素“不占空间”的 CSS 方式——它不是盖住、不是透明、不是移走，而是告诉浏览器：“这个元素不用参与布局，也不用渲染”。其他方法（比如 visibility: hidden、opacity: 0、position: absolute; left: -9999px）都会保留盒模型尺寸或触发重排/重绘开销。
为什么 display: none 后 JavaScript 读不到尺寸？
这不是 bug，是设计使然。元素被设为 display: none 后，浏览器跳过其盒模型计算，offsetHeight、getBoundingClientRect()、clientWidth 全部返回 0。常见误操作包括：
- 在
display: none状态下直接调用element.focus()—— 虽然不会报错，但焦点不可见，且可能被屏幕阅读器忽略 - 想用
offsetTop获取位置再隐藏，结果读到的是旧值或0；应先读再设display: none，或改用getComputedStyle+visibility: hidden+position: absolute临时测量 - 在 React/Vue 中用
style.display = 'none'动态控制，却忘了组件内部状态和事件监听器仍在内存中运行
display: none 在表单提交和可访问性中的实际表现
它对表单控件和辅助技术的影响常被低估：
-
<input type="text" name="email">加了display: none，仍会随表单提交——除非加disabled或移除name - 屏幕阅读器默认跳过
display: none元素及其所有子节点，无需额外加aria-hidden="true"（但若父级是display: block，子级单独设display: none，则aria-hidden也无效） - 想“视觉隐藏但语义保留”，比如 skip-link，不能只靠
display: none；得用position: absolute; left: -9999px;+width: 1px; height: 1px;+overflow: hidden;
为什么 transition: display 0.3s 完全没用？
display 是离散属性，没有中间状态（没有 display: half-none 这种东西），所以加 transition 不会生效。想实现淡入淡出效果，必须分两步：
- 先确保元素是可见的（
display: block等），再设opacity: 0→ 触发过渡 - 过渡结束后，用 JS 或
@keyframes回调设display: none - 显示时反过来：先设
display: block（瞬间生效），再设opacity: 0→opacity: 1
更稳妥的做法是用类切换：element.classList.add('fading-out')，CSS 中定义 .fading-out { opacity: 0; transition: opacity 0.3s; }，动画结束监听 transitionend 再设 display: none。
容易被忽略的继承与结构陷阱
display: none 本身不继承，但它的效果会“穿透”父子关系：
- 父元素设
display: none，子元素无论写display: block还是display: flex都无效——渲染树里根本没它 - 表格元素要小心：
display: none在<tr> 上正常，在 <code><td> 上可能导致表格结构错乱；此时应优先用 <code>visibility: collapse - 遇到“明明写了
display: none却还占位”，先检查是否被float、position: absolute或display: contents干扰了文档流
真正卡人的从来不是怎么写 display: none，而是没想清楚：这个隐藏要不要保留 DOM？要不要维持事件监听？要不要让屏幕阅读器感知？要不要支持服务端渲染 hydration 一致性？这些决策点，比 CSS 语法本身重得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
