如何通过CSS实现隐藏特定网页元素且不占用页面布局？

本文共计923个文字，预计阅读时间需要4分钟。

display: none; 是一种原生 CSS 样式，能够使元素视觉消失+布局空间。它没有过渡、不占位、不参与文档流——但请注意，它并不是删除 DOM 元素。这一点必须时刻记住。

为什么 display: none 一设就生效，却看不到 transition 动画

因为 display 是一个「离散属性」，浏览器不支持对其做插值过渡。哪怕你写了 transition: display 0.3s，它也完全无效。

• 想加动画？得换方案：用 opacity + visibility 组合，或用 max-height + overflow: hidden 模拟折叠
• 强行套 display: none 到 @keyframes 里？动画帧会直接跳变，中间状态不可见
• React/Vue 中通过 state 控制 display: none，首次渲染时若服务端已设该样式，hydration 阶段可能因 DOM 差异报 warning

表格中慎用 display: none 在 <td> 或 <th> 上

虽然浏览器通常能容错渲染，但严格来说，display: none 会破坏表格的内部盒模型逻辑，尤其在 colspan/rowspan 场景下容易引发错行、列宽错乱或打印异常。