真隐藏是 display:none：元素从渲染树中彻底移除，不占空间、不响应事件、子元素也消失；visibility:hidden 仅视觉隐藏，仍占位、可被屏幕阅读器读取、子元素能覆盖显示。
display:none 和 visibility:hidden 哪个真隐藏？
真隐藏是 display:none：元素彻底从渲染树里删了，不占空间、不响应事件、子元素也一并消失。而 visibility:hidden 只是“看不见”，但还在文档流里占着位置，能触发 hover（如果子元素设了 visibility:visible），也能被屏幕阅读器读到（取决于 UA 实现）。
常见错误现象：visibility:hidden 下给父容器加动画，结果子元素“意外”显示出来——因为子元素写了 visibility:visible，它会覆盖继承值；display:none 则完全免疫这种覆盖。
- 用
display:none当你确定不需要这个元素参与布局或交互 - 用
visibility:hidden当你需要保留占位（比如做淡入淡出过渡，或临时屏蔽内容但保持页面结构稳定） - 二者都支持 CSS 动画，但
display不能做过渡（浏览器不支持display的中间状态）
display:none 会导致 DOM 节点“消失”吗？
不会。节点还在 DOM 树里，只是渲染引擎跳过了它。你可以用 JavaScript 正常访问 document.getElementById('xxx')，也能读写它的 style.display，甚至调用 getBoundingClientRect()——但返回的宽高全为 0。
容易踩的坑：display:none 元素内的 input 不会触发 focus()，也不会提交表单数据；用 aria-hidden="true" 配合更稳妥，尤其对辅助技术。
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 不要靠
display:none来“销毁”敏感数据，DOM 仍在内存中 - 用
display:none切换大量元素时，可能引发频繁重排（reflow），比visibility开销大 - 服务端渲染（SSR）场景下，
display:none不影响 HTML 输出，但首次 JS 执行前用户能看到“闪现”
visibility:hidden 能被 pointer-events 绕过吗？
可以。默认 visibility:hidden 元素及其子元素都不响应鼠标事件，但加上 pointer-events:none 到父级、再在子元素上设 pointer-events:auto，就能让子元素“透出”来响应点击——前提是子元素没被其他规则挡住。
使用场景少但关键：比如遮罩层用 visibility:hidden 保布局，又想让里面某个按钮可点；或者做视觉隐藏但需保留热区。
-
visibility:hidden+pointer-events:none是双重保险，但别滥用，可访问性会打折扣 -
pointer-events对display:none无效——它根本不在渲染树里，事件系统压根不扫描它 - 注意 Safari 旧版本对
visibility+pointer-events组合的支持不稳定
display:contents 是不是更好的隐藏方式？
不是隐藏，是“掏空”。display:contents 让元素自身不生成盒子，但子元素照常渲染、参与父容器的布局流。它不隐藏内容，反而让子元素“浮上来”一层。
所以别把它当 display:none 替代品。真要用，典型场景是语义化标签（如 <article>）不想加额外样式盒，又不想破坏 HTML 结构。
-
display:contents元素上的背景、边框、内边距全部失效 - 该元素失去所有盒模型特性，
getBoundingClientRect()返回空矩形 - 不支持 IE，Edge 16+ 才开始支持，移动端 iOS Safari 15.4+ 才稳定
display 系列），一个是“藏内容”（visibility、opacity、clip-path）。选哪个，得先想清楚你到底想删掉还是想盖住——很多人卡住，是因为没分清这一步。 
