display: none 使元素彻底退出渲染树，不生成盒子、不参与布局、不占空间；恢复显示时须还原原始 display 值，不可统一设为 block，否则破坏默认行为与布局逻辑。
display: none 会让元素彻底退出渲染树
它不是“视觉隐藏”，而是浏览器在构建渲染树（Render Tree）阶段就跳过该元素——DOM 节点还在，但对应盒子不生成、不参与布局计算、不占空间、不触发重排。这意味着：offsetWidth、offsetHeight、getBoundingClientRect() 全部返回 0，哪怕你写了 width: 300px 也无效。
恢复显示时不能硬写 display: block
因为不同元素默认的 display 值不同：div 是 block，span 是 inline，button 是 inline-block，td 是 table-cell。强行统一设为 block 会破坏原有行为：
-
span变成block后独占一行，可能撑开父容器高度 -
img设为block会丢失vertical-align对齐能力 -
ul若原本是flex容器，切回block就丢了弹性布局逻辑
display: none 不等于 visibility: hidden
前者让元素“不在格式化上下文中”，后者仍保留在文档流里、占位、可响应事件（除非加 pointer-events: none）。常见误用场景：
- 想做淡入动画却先设
display: none→transition不触发，因为属性没被计算 - 表单中用
display: none隐藏input→ 屏幕阅读器跳过，且提交时该字段不会发往服务器 - 配合 JS 切换 tab 时直接
display: none所有非当前面板 → 恢复时若没还原原始display值，布局错乱
真正安全的恢复方式是存原始值
不要靠猜，也不要写死 block 或 inline。实操建议：
- 初始化时用
getComputedStyle(el).display读取并缓存原始值 - 或给元素加 data 属性，如
data-display="inline-block" - 切换显示时优先用
el.style.display = ''（清空内联样式，回退到 CSS 规则或默认值） - 避免用
display: contents替代none—— 它虽不占空间，但子元素会“冒”出来，语义和可访问性风险更大
最易被忽略的一点：display 的行为绑定的是“盒子类型+格式化上下文”，不是简单的“显隐开关”。改它，等于重定义这个元素在整个布局体系里的身份。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
