display: none 彻底移除元素且不占空间，适用于真隐藏场景，但影响SEO、可访问性及JS尺寸计算；恢复显示需匹配原布局模式，推荐用class控制而非内联样式。
display: none 会彻底移除元素，但要注意它不保留原始空间
用 display: none 隐藏区块最直接，浏览器完全不渲染该元素，也不占文档流位置。适合「真隐藏」场景，比如条件性展示的弹窗、表单步骤、权限控制区域。
常见错误是误以为它只是“看不见”，结果发现父容器高度塌陷、后续元素上移、或者依赖 DOM 尺寸的 JS（如 getBoundingClientRect()）报错或返回 { width: 0, height: 0 }。
- 如果需要隐藏但保留占位，改用
visibility: hidden（元素仍参与布局） -
display是继承属性，但none不会向下继承 —— 子元素设成display: block也无效，必须先让父级恢复非none值 - 用 JS 切换时，避免频繁读写
style.display触发重排；可预先定义 class，用element.classList.toggle("hidden")
用 class 控制 display 更可靠，别硬写内联 style
在 <style> 或外部 CSS 文件里定义 .hidden { display: none; }，再通过 JS 或服务端逻辑加/删 class，比反复操作 element.style.display = "none" 更可控。
原因很实际：内联样式优先级最高，一旦写死，CSS 文件里的同名规则就覆盖不了；调试时也容易漏掉——你看到元素没隐藏，可能只是某个 !important 或更高优先级的 display: block 覆盖了它。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<div class="card js-hideable">...</div>，JS 中操作el.classList.add("hidden") - 如果必须用内联 style（如 SSR 渲染初期状态），确保它和交互逻辑不冲突，比如服务端输出
style="display:none"，前端 JS 再统一接管显示逻辑 - 注意：
display的值有多个合法选项（block、flex、grid、inline-block等），恢复显示时不能只设display: block—— 容易破坏原有布局模式
display: none 对 SEO 和可访问性有实质影响
搜索引擎爬虫和屏幕阅读器通常会跳过 display: none 的内容，视作「不存在」。如果你隐藏的是关键导航、摘要或结构化数据，可能影响收录或残障用户使用。
典型踩坑场景：用 display: none 折叠 FAQ 列表，但没同步处理 aria-hidden 或 aria-expanded，导致键盘用户无法聚焦、屏幕阅读器读不出展开状态。
- 纯视觉隐藏（如辅助文案、图标替代文字）应改用「无障碍隐藏」方案：
position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; - 如果内容确实不该被索引（如广告占位、测试模块），
display: none反而是正确选择 - 不要靠
display: none实现「懒加载」逻辑——它不阻止资源加载（图片、iframe 仍会请求）
display 属性不是万能开关，注意和 visibility / opacity 的区别
display: none 是「卸载式隐藏」，visibility: hidden 是「透明式隐藏」，opacity: 0 是「不可见但可交互式隐藏」——三者行为差异极大，选错会导致点击穿透、动画异常或焦点陷阱。
-
visibility: hidden保留空间，子元素可通过visibility: visible单独显示；display: none下子元素无论如何都不可见 -
opacity: 0元素仍在文档流中、可接收事件、会触发动画重绘；若只想隐藏不交互动效，反而更耗性能 - 过渡动画不能从
display: none开始或结束 —— 浏览器不支持该属性的渐变，需配合opacity+max-height或 JS 控制显隐时机
