CSS 属性 : Display vs. 可见性

Question

显示属性与可见性属性有何区别？

Answer 1

visibility 属性只告诉浏览器是否显示元素。它要么可见(可见 - 您可以看到)，要么不可见(隐藏 - 您看不到)。

display 属性告诉浏览器如何绘制和显示一个元素(如果有的话)——它是否应该显示为内联元素(即它与文本和其他内联元素一起流动)或 block 级元素(即它具有您可以设置的高度和宽度属性，它是可 float 的等)，或 内联-block(即它像一个 block 框，但内联放置)和其他一些(list-item、table、table-row 、table-cell、flex 等)。

当您将元素设置为 display: block 但还设置了 visibility: hidden 时，浏览器仍将其视为 block 元素，除了你只是看不到它。有点像你如何将一个红色盒子堆叠在一个看不见的盒子之上:红色盒子看起来像是漂浮在半空中，而实际上它位于一个你看不见的物理盒子之上。

换句话说，这意味着 display 不是 none 的元素仍然会影响页面中元素的流动，无论它们是否可见.围绕带有 display: none 的元素的框将表现为该元素从未存在过(尽管它保留在 DOM 中)。