不能无脑用 display: block 恢复显示，因为不同元素默认 display 值不同（如 div 是 block、span 是 inline、button 是 inline-block），强行设为 block 会破坏原有盒模型行为和布局。
直接用 display: none 就能彻底隐藏元素，它不占空间、不响应事件、子元素也一并消失；但恢复显示时，不能只写 display: block —— 必须匹配元素原本的显示模式，否则可能破坏布局。
为什么不能无脑用 display: block 恢复显示
元素默认的 display 值各不相同：div 是 block，span 是 inline，button 是 inline-block，表格相关元素（如 td）是 table-cell。硬设成 block 会强制改变其盒模型行为：
- 把
span设为block，它会独占一行，可能撑开父容器高度 - 把
img设为block，原本的行内对齐（如vertical-align）失效 - 把
ul设为block看不出问题，但若它原本被设过display: flex，再切回block就丢失了弹性布局
安全恢复显示的三种做法
关键不是“怎么显示”，而是“怎么还原”。推荐按优先级选择：
- 用 CSS 类控制：预先定义
.is-hidden { display: none; }和对应显示类（如.is-shown { display: block; }），并在 HTML 中切换 class，避免内联样式干扰 - 记录原始值：JavaScript 中用
getComputedStyle(el).display读取初始值，隐藏前存起来，恢复时写回（注意：该值可能是inline、flex、grid等） - 用
display: revert（仅现代浏览器支持）：它会回退到浏览器默认或用户代理样式表的值，但 IE 和旧版 Safari 不支持
display: none 和 visibility: hidden 别混用
两者行为差异极大，选错会导致布局跳变或交互异常：
-
display: none：元素从渲染树移除 → 不占空间、不可 focus、子元素不渲染、无障碍技术忽略 -
visibility: hidden：元素仍参与布局 → 占位不变、可被 focus（除非加pointer-events: none）、子元素默认也隐藏（但可用visibility: visible单独恢复） - 常见误用：用
visibility: hidden实现“菜单收起”，结果空白区域还在，点击位置错乱
动态切换时容易忽略的副作用
display: none 不只是视觉开关，它会触发一系列底层变化：
- 被隐藏的
iframe会暂停加载和脚本执行，恢复后重新初始化 - 隐藏期间的 CSS 动画、
transition全部中断，不会补帧 - 如果元素绑定了
resize监听器（比如图表库），display: none后再显示，不会自动触发 resize 事件 - 某些第三方组件（如地图 SDK）依赖元素尺寸，
display: none后需手动调用resize()或invalidateSize()
真正麻烦的不是“怎么藏”，而是“藏完怎么自然地露出来”——尤其是当元素原本是 flex 子项、grid 项，或受外部 CSS 框架影响时，display 值早就不单纯了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
