display: none 彻底移除元素渲染但保留dom，不占空间、不影响布局、屏幕阅读器忽略，且不支持过渡动画；适用于菜单折叠等场景，但需避免频繁切换引发重排。

用 display: none 隐藏元素，它就真“消失”了——DOM还在，但不渲染、不占空间、不影响布局。

为什么 display: none 比 visibility: hidden 更彻底

很多人混淆这两个属性：visibility: hidden 只是让元素“看不见”，但它仍占据文档流中的位置；而 display: none 会把元素从渲染树中完全移除，后续元素自动填补空位。

• 屏幕阅读器不会读取 display: none 的内容（对可访问性有影响）
• 元素上的动画、过渡（transition）在 display 切换时不会生效——因为它是离散属性，不支持渐变
• JavaScript 查询 offsetHeight 或 getBoundingClientRect() 时，返回值为 0

display: none 在响应式和交互场景下的典型用法

常见于菜单折叠、表单步骤切换、条件性提示等需要“彻底隐藏+随时恢复”的场景。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 配合 class 切换最稳妥：element.classList.toggle('hidden')，CSS 中定义 .hidden { display: none; }
• 避免直接操作 style.display = 'none'，否则容易覆盖其他 display 值（比如原本是 inline-flex，设为 none 后再设回 block 就错乱了）
• 服务端渲染（SSR）或 hydration 前后要注意：React/Vue 中若用 v-if 或 {condition && <comp></comp>}，本质也是控制是否挂载，比 CSS 隐藏更彻底

容易踩的坑：display 切换引发的重排与性能抖动

虽然 display 本身不触发动画，但频繁切换（比如在 scroll 或 mousemove 中）可能引发连续重排（reflow），尤其当隐藏/显示的是包含大量子节点的容器时。

• 别在 requestAnimationFrame 外直接批量操作多个 display —— 浏览器可能每改一次就重排一次
• 如果只是临时隐藏用于测量尺寸，优先用 getComputedStyle + position: absolute; visibility: hidden; 替代，避免 layout thrashing
• 注意媒体查询中不要只靠 display: none 来“屏蔽”组件逻辑——JS 仍会执行，事件监听器依然存在，内存泄漏风险更高

真正难的不是写 display: none，而是判断该不该用它：要不要保留 DOM？要不要维持 JS 状态？要不要考虑 SSR 同构？这些才是实际项目里卡住人的地方。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！