CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
如果可视性属性设置为“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;
它将不会出现在页面上，也不会占用任何空间。
visibility: hidden;
它隐藏了一个元素，但它仍然会占用与之前相同的空间。元素将被隐藏，但仍然会影响布局。
可见性:隐藏保留空间，而显示:无不保留空间。
无示例:https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none
示例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
显示:none从布局流中移除元素。
可见性:隐藏隐藏它，但离开空间。
正如在这个堆栈的其他地方所描述的，这两者并不是同义词。Visibility:hidden将在页面上留下空白，而display:none将完全隐藏元素。我认为有必要讨论一下这是如何影响给定元素的子元素的。如果你要使用visibility:hidden，那么你可以用正确的样式显示该元素的子元素。但是对于display:none，不管你是否使用display: block | flex | inline | grid | inline-block，你都会隐藏子元素。
它们不是同义词——display:没有一个会从页面流中移除元素，页面的其余部分就像它不存在一样。
可见性:hidden在视图中隐藏元素，但不隐藏页面流，在页面上为其留下空间。
Display:none将隐藏元素并折叠正在占用的空间，而visibility:hidden将隐藏元素并保留元素的空间。display:none也会影响一些旧版本IE和Safari中可用的javascript属性。
