页面元素“隐形”了，为什么布局还在跳动？

很多时候调试页面会遇到这种情况：想把一个弹窗或者悬浮按钮藏起来，随手敲了个属性，结果发现页面结构变了。要么内容突然往上一挤，要么空出一大块白地等着填充。这时候你就得在display:none和visibility:hidden之间做个选择了。别觉得这俩差不多，它们在浏览器内核里的处理方式完全不同，选错了不仅影响体验，还可能埋下性能隐患。

最简单直观的区别在于“占不占座”。把页面想象成一个坐满人的教室，display:none就像是直接把某个学生退学处理了，他的课桌被收走，后面的人自然要往前补位，整个页面的文档流会发生重排（Reflow）。而visibility:hidden更像是给这位学生戴上了面具，他还坐在原位，但别人看不见他，周围的同学不需要挪动位置，浏览器只需要把这个像素点涂成透明色即可，这叫重绘（Repaint）。

这个差异直接决定了性能消耗的大小。display属性的变化会触发浏览器重新计算布局树，如果在大列表或复杂滚动场景下频繁切换，页面卡顿感会非常明显。相比之下，visibility主要涉及绘制层面的调整，开销要小得多。如果你是在做高频刷新的进度条加载状态，或者复杂的视差滚动，优先保证性能的话，visibility往往比前者更流畅。

有一个极易踩坑的细节是子元素的继承性。当你给父容器设置了visibility:hidden，里面的所有孩子默认都会跟着一起隐身。除非你在子元素上单独写一句visibility:visible强行显形，否则这一整窝儿都没法看见。这有时候很麻烦，比如你想隐藏一个模态框的背景遮罩，却误伤了框内的确认按钮，排查了半天才发现是属性继承作祟。而display属性则不具备这种连锁反应，它切得干干净净，只针对当前节点生效。

说到交互动画，这是很多新人容易翻车的地方。很多人想做一个下拉菜单的淡入淡出效果，直接尝试对display加Transition会发现完全无效。因为从none到有值的切换，浏览器认为是不存在的空间瞬间出现，中间没有任何数值可以过度。这时候就得结合visibility来用。比较标准且好用的做法是：保持visibility: visible配合opacity: 0来实现视觉上的透明，等 CSS 过渡完全结束后，再在回调函数里把visibility:hidden置回不可见状态。这样既保留了过渡动画的平滑，又防止了用户在过渡期间还能点到透明的不可见按钮。

实际开发中到底怎么选？如果目标是彻底移除组件以释放内存，或者是为了 SEO 让搜索引擎爬虫直接无视该部分内容，毫不犹豫用display:none。它的意图最明确，表示该元素在页面上完全不重要。

如果目的是保留原有的排版结构，防止页面布局发生抖动，或者是为了做预加载后的延迟显示，优先考虑visibility:hidden。特别是对于那些需要维持对齐关系的导航栏或者图标组，用这种方式能确保其他元素位置纹丝不动。

写代码时别光顾着功能跑通，多想想用户的实际感知。别让隐藏的按钮还占据可点击区域导致误触，也别让布局的突然跳动吓到正在浏览的用户。把这些底层逻辑琢磨透，你的界面交互才会显得专业且细腻。