是的，display:none 让元素彻底退出渲染树，不占空间、不可见、不响应事件、子元素也消失；它不是隐藏而是“当作不存在”，但频繁切换可能因重建渲染树而卡顿。
display:none 真的完全移除元素了吗
是的，display:none 会让元素彻底退出渲染树——它不占空间、不可见、不响应事件、子元素也一并消失。这不是“藏起来”，而是“当作不存在”。但要注意：它不会触发重排（reflow）前的布局计算，所以对性能友好；可一旦频繁切换，反而可能因反复重建渲染树而卡顿。
常见错误现象：display:none 后用 JavaScript 读取 offsetHeight 或 getBoundingClientRect()，结果全是 0，不是 bug，是预期行为。
使用场景：
- 条件性展示模块（如弹窗关闭后彻底卸载）
- 服务端渲染中隐藏客户端才需要的内容
- 配合 JS 实现 tab 切换时“销毁非当前页”逻辑
display:none 和 visibility:hidden 的关键区别
visibility:hidden 只是让内容不可见，但元素仍占据文档流位置；display:none 连位置都不要了。这个差异直接影响布局行为和动画兼容性。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 误以为
visibility:hidden能替代display:none来“节省性能”——其实它仍参与布局计算，开销未必小 - 用
visibility:hidden配合 CSS 动画（如opacity）时，元素还在流里，可能撑开父容器或影响兄弟元素定位 -
display:none下的transition不会触发，因为属性压根没被计算；想做淡入淡出，得先设display:block再改opacity
display:none 在表单和可访问性中的副作用
隐藏的表单控件（如 <input type="hidden"> 以外的）如果用了 display:none，会被屏幕阅读器忽略，且提交时也不会发往服务器——哪怕它有 name 和 value。
正确做法：
- 纯隐藏数据用
<input type="hidden">，别套display:none - 要隐藏但保留语义和提交能力，改用
position:absolute; left:-9999px; top:-9999px;（注意：仍需确保 focusable 元素不被跳过） - 动态显示/隐藏区域时，用
aria-hidden="true"配合display:none，避免双重隐藏导致焦点陷阱
兼容性无问题，所有浏览器都支持 display:none，但要注意：IE8 及更早版本不支持在某些 SVG 元素上生效。
display:none 的继承与 display:contents 的干扰
display:none 不可继承，但它的父级设了 display:none，子元素自然也没机会渲染。真正容易被忽略的是 display:contents——它会让父元素“消失”，只留下子元素在文档流中，此时若对子元素设 display:none，效果看起来像父级被隐藏，实则逻辑完全不同。
示例：
<div style="display:contents"> <p style="display:none">这段不会显示</p> </div>
这里 <p></p> 确实不显示，但不是因为外层 div 隐藏了它，而是它自己被设为 display:none。如果外层是 display:contents + 子元素没设 display:none，那子元素就直接“浮”到父级位置去了。
复杂点在于：当组件库或 CSS 框架内部用了 display:contents（比如某些 React UI 库的 wrapper），你再用 display:none 控制可见性，可能发现样式没按预期生效——先检查 computed styles，看实际生效的是哪一层的 display 值。
