显示:没有

它将从页面的正常流程中删除元素，允许其他元素填充。

一个元素将不会出现在页面上，但我们仍然可以通过DOM与它交互。 在其他元素之间不会为它分配空间。

可见性:隐藏

它会将元素保留在页面的正常流程中，这样仍然会占用空间。

一个元素是不可见的，并且在页面上为它分配了element的空间。

其他隐藏元素的方法

使用z - index

#element {
   z-index: -11111;
}

将元素移出页面

#element {
   position: absolute; 
   top: -9999em;
   left: -9999em;
}

关于可见性:hidden和display: none属性的有趣信息

可见性:隐藏和显示:没有一个会是同样的表现，因为它们都会重新触发布局，油漆和合成。然而，不透明度:0的功能等同于可见性:隐藏，并且不会重新触发布局步骤。

css转换属性也很重要，我们需要注意。因为从可见性:hidden切换到可见性:visible允许使用css转换，而从display: none切换到display: block则不行。visibility: hidden具有不捕获JavaScript事件的额外好处，而opacity: 0则捕获事件

显示:没有;既不会显示元素，也不会在页面上为元素分配空间，而可见性:隐藏;不会在页面上显示元素，但会在页面上分配空间。 在这两种情况下，我们都可以访问DOM中的元素。 为了更好地理解它，请查看以下代码: 显示:无vs可见性:隐藏

正如在这个堆栈的其他地方所描述的，这两者并不是同义词。Visibility:hidden将在页面上留下空白，而display:none将完全隐藏元素。我认为有必要讨论一下这是如何影响给定元素的子元素的。如果你要使用visibility:hidden，那么你可以用正确的样式显示该元素的子元素。但是对于display:none，不管你是否使用display: block | flex | inline | grid | inline-block，你都会隐藏子元素。

如果可视性属性设置为“hidden”，浏览器仍然会在页面上为内容占用空间，即使它是不可见的。 但是当我们将一个对象设置为“display:none”时，浏览器不会在页面上为其内容分配空间。

例子:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

查看详细信息

可见性:隐藏将元素保留在页面中，并占用该空间，但不显示给用户。

显示:无将在页面中不可用，不占用任何空间。

可见性:隐藏对象仍然占据垂直高度的页面。与显示:无它是完全删除。如果你在图片下面有文字，并且你设置了display:none，那么文字会向上移动以填充图片所在的位置。如果你做可见性:隐藏文本将保持在相同的位置。