该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中)。