CSS属性：显示与可见性

Question

显示属性和可见性属性之间有何区别？

Answer 1

该visibility属性仅告诉浏览器是否显示元素。它是可见的（visible-您可以看到）或不可见的（hidden-您看不到）。

该display属性告诉浏览器 如何
绘制和显示元素（如果有的话）-是将其显示为inline元素（即，与文本和其他内联元素一起流动）还是block-level元素（即，具有height和width属性，你可以设置，它的浮动等），或inline- block（即它的作用就像一个黑匣子，但奠定了直列代替）和其他一些人（list-item，table，table-row，table- cell，flex，等）。

当您将元素设置为，display: block但 又将 set设置visibility: hidden为时，浏览器仍将其视为块元素，除非您看不到它。有点像您将一个红色框堆叠在一个看不见的框之上：该红色框看起来像漂浮在空中，而实际上却位于您看不见的物理框之上。

换句话说，这意味着display不none存在的元素仍然会影响页面中元素的流动，无论它们是否可见。围绕元素的框的display: none行为就像该元素从不存在（尽管它仍保留在DOM中）。