CSS属性:显示与可见性

这个 visibility 属性只告诉浏览器是否显示元素。它要么是可见的( visible hidden -你看不见)。

这个 display 属性告诉浏览器 怎样 绘制和显示元素(如果有的话)-是否应将其显示为 inline 元素(即,它与文本和其他内联元素一起流动)或 block -level元素(即,它具有可以设置的高度和宽度属性、可浮动等),或 inline-block (也就是说,它的作用类似于一个块盒,但它是内联放置的)和其他一些( list-item table , table-row table-cell , flex 等)。

将元素设置为 display: block 但是 也 visibility: hidden ,浏览器仍然将其视为块元素,只是您看不到它。有点像你把一个红盒子叠在一个看不见的盒子上面:红盒子看起来像漂浮在半空中,而实际上它坐在一个你看不见的物理盒子上面。

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

• 因为它仍然在那里用于布局,所以可以在不可见的情况下测量它
• 更改内容仍然需要时间回流/布局页面
• 可见性是继承的,因此这意味着您可以通过赋予子级可见性使其可见:visible;

显示:无;

• 将使元素不参与流/布局
• 元素不会占用任何空间。为了布局的目的,它好像不存在

附加说明:

• 隐藏内容中的图像:
• 隐藏内容中的字体: webkit浏览器(Chrome/Safari)可能会延迟加载仅在隐藏元素中使用的自定义字体,包括通过可见性或显示。这可能会导致您在加载自定义字体之前测量仍在使用回退字体的元素。

显示:无;将从DOM中删除DOM元素视觉样式/物理空间,而可视性:隐藏;不会移除元素,而只是将其隐藏。因此,当设置为v时,在DOM中占据300px垂直空间的div仍将占据300px垂直宽度可视性:隐藏;但当设置为显示:无;它的视觉风格和它所占据的空间被隐藏起来,然后由于缺少更好的词,空间被“释放”出来。

[编辑]-我写上述内容是很久以前的事了,我不知道是我知识不够丰富还是今天过得不好,但事实是,这个元素永远不会从DOM层次结构中删除。使用时,所有块级显示“样式”都完全“隐藏”显示:无,而v可视性:隐藏;元素本身是隐藏的,但它仍然占据DOM中的可视空间。我希望这能把事情弄清楚