CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
它们不是同义词。
Display:none将元素从页面的正常流程中移除，允许其他元素填充。
可见性:隐藏将元素留在页面的正常流程中，这样仍然会占用空间。
想象一下，你正在游乐园排队，排队的人非常吵闹，保安把他们从队伍中拉了出来。然后排队的每个人都向前移动一个位置来填补现在的空缺。这就像display:none。
与此类似的情况相比，如果你前面有人穿上了隐形斗篷。在观看这条线时，它看起来像有一个空白的空间，但人们无法真正填补那个空白，因为有人仍然在那里。这就像可见性:隐藏。
其他回答
可见性:隐藏将元素保留在页面中，并占用该空间，但不显示给用户。
显示:无将在页面中不可用，不占用任何空间。
它们不是同义词——display:没有一个会从页面流中移除元素，页面的其余部分就像它不存在一样。
可见性:hidden在视图中隐藏元素，但不隐藏页面流，在页面上为其留下空间。
Display: none将元素从页面中完全移除，并且构建页面时就好像该元素根本不存在一样。
可见性:隐藏保留文档流中的空间，即使您再也看不到它。
这取决于你在做什么，可能有也可能没有很大的区别。
另一个区别是可见性:hidden在非常非常老的浏览器中有效，而display:none则不行:
https://www.w3schools.com/cssref/pr_class_visibility.asp
https://www.w3schools.com/cssref/pr_class_display.asp
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
