可见性的区别是什么：隐藏和显示：无？

Question

可见性的区别是什么：隐藏和显示：无？CSS规则visibility:hidden和display:none两者都导致元素不可见。这些是同义词吗？

Answer 1

它们不是同义词。

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

visibility:hidden将元素保留在页面的正常流中，以便仍然占用空间。

想象一下，你在游乐园排队搭便车，而排队的人太吵闹了，以至于保安把他们从队伍里拉了出来。排好队的每个人都会向前移动一个位置，以填补现在空空如也的位置。这就像display:none.

将此与类似的情况进行对比，但你面前的人会穿上隐形斗篷。在观看这条线的时候，它看起来就像有一个空的空间，但是人们并不能真正地填补那个看上去空的空间，因为有人还在那里。这就像visibility:hidden.

Answer 2

display:none从布局流中移除元素。

visibility:hidden把它藏起来但留下空间。