前端排查问题常见一幕：F12 打开开发者工具，元素明明在 HTML 里，页面上却找不到，八成是样式里挂了 display: none;。它的作用就一句话——让元素彻底消失，连占的位置都收走。
声明生效后发生了什么
加上这条声明，渲染时这个元素直接不生成盒子，不占任何空间，后面的元素顶上来，元素内部的子元素也一起消失，点击、悬停这类事件自然也触发不了。想让元素回来，把值改回 block、flex 或 inline 都行，具体用哪个看它原来的布局角色。另外切换瞬间会打断元素上正在进行的过渡动画，做动效时要留意。
三种隐藏方式的对比
- display: none;：彻底消失、不占位置、页面重新排版、事件失效
- visibility: hidden;：看不见，但原来的位置还占着，周围元素不动
- opacity: 0;：透明度归零，位置保留，理论上还能收到点击
做菜单、弹层这类需要「从布局里抽走」的效果，就用它；只是暂时藏一下又不想页面跳动，visibility: hidden; 更合适。
常见的搭配场景
移动端适配里经常出现：桌面端的侧栏在窄屏下用媒体查询把它收掉。表单校验里，错误提示默认隐藏，校验不过再切回来显示。也常在样式表里定义一个 .hidden 类专门负责隐藏，哪个元素要藏就加哪个类，样式集中改，不用到处翻。
两个提醒：被隐藏的元素依然在 DOM 里，敏感信息靠它藏不算真隐藏，打开源码就能看到，别当安全手段用；频繁切换显示会触发重排，动画流畅度要求高的地方，transform 和 opacity 更顺滑。
判断方法很直接：要连位置一起收走就用 display: none;，要保留占位就用 visibility: hidden;，只想做淡入淡出就用 opacity，三个都是常规手段，按布局影响选。