CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
显示:没有;既不会显示元素，也不会在页面上为元素分配空间，而可见性:隐藏;不会在页面上显示元素，但会在页面上分配空间。 在这两种情况下，我们都可以访问DOM中的元素。 为了更好地理解它，请查看以下代码: 显示:无vs可见性:隐藏
其他回答
显示:none从布局流中移除元素。
可见性:隐藏隐藏它，但离开空间。
Display:none表示所讨论的标签根本不会出现在页面上(尽管您仍然可以通过dom与它进行交互)。在其他标记之间不会为它分配空间。
可见性:隐藏意味着与display:none不同，标签是不可见的，但是在页面上为它分配了空间。标签被渲染，只是在页面上看不到。
例如:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
将[style-tag-value]替换为display:none会导致:
test | | test
用可见性替换[style-tag-value]:隐藏结果:
test | | test
display: none;
它将不会出现在页面上，也不会占用任何空间。
visibility: hidden;
它隐藏了一个元素，但它仍然会占用与之前相同的空间。元素将被隐藏，但仍然会影响布局。
可见性:隐藏保留空间，而显示:无不保留空间。
无示例:https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none
示例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
Display:none将隐藏元素并折叠正在占用的空间，而visibility:hidden将隐藏元素并保留元素的空间。display:none也会影响一些旧版本IE和Safari中可用的javascript属性。
另一个区别是可见性:hidden在非常非常老的浏览器中有效，而display:none则不行:
https://www.w3schools.com/cssref/pr_class_visibility.asp
https://www.w3schools.com/cssref/pr_class_display.asp
