显示:没有

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

一个元素将不会出现在页面上，但我们仍然可以通过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则捕获事件

除了所有其他答案外，IE8还有一个重要的区别:如果你使用display:none并试图获取元素的宽度或高度，IE8将返回0(而其他浏览器将返回实际的大小)。IE8仅为可见性返回正确的宽度或高度:隐藏。

它们不是同义词。

Display:none将元素从页面的正常流程中移除，允许其他元素填充。

可见性:隐藏将元素留在页面的正常流程中，这样仍然会占用空间。

想象一下，你正在游乐园排队，排队的人非常吵闹，保安把他们从队伍中拉了出来。然后排队的每个人都向前移动一个位置来填补现在的空缺。这就像display:none。

与此类似的情况相比，如果你前面有人穿上了隐形斗篷。在观看这条线时，它看起来像有一个空白的空间，但人们无法真正填补那个空白，因为有人仍然在那里。这就像可见性:隐藏。

它们不是同义词——display:没有一个会从页面流中移除元素，页面的其余部分就像它不存在一样。

可见性:hidden在视图中隐藏元素，但不隐藏页面流，在页面上为其留下空间。

Display: none将元素从页面中完全移除，并且构建页面时就好像该元素根本不存在一样。

可见性:隐藏保留文档流中的空间，即使您再也看不到它。

这取决于你在做什么，可能有也可能没有很大的区别。

Display:none将隐藏元素并折叠正在占用的空间，而visibility:hidden将隐藏元素并保留元素的空间。display:none也会影响一些旧版本IE和Safari中可用的javascript属性。