CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗?
当前回答
它们不是同义词。
Display:none将元素从页面的正常流程中移除，允许其他元素填充。
可见性:隐藏将元素留在页面的正常流程中，这样仍然会占用空间。
想象一下，你正在游乐园排队，排队的人非常吵闹，保安把他们从队伍中拉了出来。然后排队的每个人都向前移动一个位置来填补现在的空缺。这就像display:none。
与此类似的情况相比，如果你前面有人穿上了隐形斗篷。在观看这条线时，它看起来像有一个空白的空间，但人们无法真正填补那个空白，因为有人仍然在那里。这就像可见性:隐藏。
其他回答
它们不是同义词。
Display:none将元素从页面的正常流程中移除，允许其他元素填充。
可见性:隐藏将元素留在页面的正常流程中，这样仍然会占用空间。
想象一下，你正在游乐园排队，排队的人非常吵闹，保安把他们从队伍中拉了出来。然后排队的每个人都向前移动一个位置来填补现在的空缺。这就像display:none。
与此类似的情况相比，如果你前面有人穿上了隐形斗篷。在观看这条线时，它看起来像有一个空白的空间，但人们无法真正填补那个空白，因为有人仍然在那里。这就像可见性:隐藏。
当涉及到子节点时，有很大的不同。例如:如果你有一个父div和一个嵌套的子div。所以如果你这样写:
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>
在这种情况下，没有divs是可见的。但如果你这样写:
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>
然后子div将可见，而父div将不显示。
可见性:隐藏保留空间;显示:没有没有。
可见性:隐藏将元素保留在页面中，并占用该空间，但不显示给用户。
显示:无将在页面中不可用，不占用任何空间。
这种差异不仅体现在样式上，还体现在使用JavaScript操作元素时的行为上。
显示效果及副作用:无:
目标元素从文档流中取出(不影响其他元素的布局); 所有的后代都会受到影响(也不会显示出来，并且不能“跳出”这个继承); 测量不能用于目标元素，也不能用于它的后代元素——它们根本不被渲染，因此它们的clientWidth, clienttheight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect()， getComputedStyle()，都返回0。
可见性的影响和副作用:隐藏:
目标元素从视图中隐藏，但没有从流中取出并影响布局，占用其正常空间; 目标元素及其后代的innerText(但不是innerHTML)返回空字符串。
