隐藏元素时保留页面布局

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

禁用显示

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

考虑以下示例：

最初，div元素正常显示。隐藏它：
#element {
  display: none;
}
当应用 display: none 时，该元素在视觉上变得不存在，从而释放其先前占用的空间。恢复元素的可见性：
#element {
  display: block;  
}
使用显示的好处：无
保留页面布局
维持元素在 HTML 代码中的位置
通过设置display:block
可以让元素轻松再次显示