如何隐藏 HTML 元素而不影响页面布局？

在隐藏元素的同时保留页面布局

当旨在隐藏 HTML 元素而不影响视觉布局时，使用 Visibility:hidden 可能会导致导致不良结果。在视图中隐藏元素时，它继续占据页面上的相同空间。

禁用显示

要克服此挑战，建议使用 display 属性。通过将元素的显示设置为 none，它实际上会从视觉表示中消失，就好像它已完全从 DOM 中删除一样。

考虑以下示例：

<div>
<p>最初，div元素正常显示。要隐藏它：</p>
<pre class="brush:php;toolbar:false">#element {
  display: none;
}

当应用 display: none 时，该元素在视觉上变得不存在，从而释放其先前占用的空间。要恢复元素的可见性：

#element {
  display: block;  
}

使用显示的好处：无

• 保留页面布局
• 维护元素在 HTML 代码中的位置
• 允许元素通过设置 display: block

轻松再次显示