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

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

可见性:隐藏保留空间;显示:没有没有。

这种差异不仅体现在样式上，还体现在使用JavaScript操作元素时的行为上。

显示效果及副作用:无:

目标元素从文档流中取出(不影响其他元素的布局); 所有的后代都会受到影响(也不会显示出来，并且不能“跳出”这个继承); 测量不能用于目标元素，也不能用于它的后代元素——它们根本不被渲染，因此它们的clientWidth, clienttheight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect()， getComputedStyle()，都返回0。

可见性的影响和副作用:隐藏:

目标元素从视图中隐藏，但没有从流中取出并影响布局，占用其正常空间; 目标元素及其后代的innerText(但不是innerHTML)返回空字符串。

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

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

显示:没有

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

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

另一个区别是可见性:hidden在非常非常老的浏览器中有效，而display:none则不行:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp