CSS属性:显示与可见性

Question

显示与可见性属性有什么区别？

Answer 1

该visibility属性仅告知浏览器是否显示元素.它既可见(visible- 你可以看到它),hidden也可以看不见(- 你看不到它).

该display属性告诉浏览器如何绘制和显示元素,如果有的话 - 它是否应该显示为inline元素(即它与文本和其他内联元素一起流动)或者是一个block级别元素(即它具有高度和宽度属性,你可以设置,它的浮动等),或inline-block(即它的作用就像一个黑匣子,但奠定了直列代替)和其他一些人(list-item,table,table-row,table-cell,flex,等).

当您将元素设置为display: block但也设置时visibility: hidden,浏览器仍会将其视为块元素,除非您没有看到它.有点像你在一个看不见的盒子上堆叠一个红色的盒子:红色的盒子看起来像漂浮在半空中,而实际上它是坐在你看不到的物理盒子的顶部.

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

Answer 2

能见度:隐藏;

• 元素不会被绘制并且不会接收点击/触摸事件,但它所占用的空间仍然被占用
• 因为它仍然存在用于布局目的,您可以在不显示它的情况下进行测量
• 更改内容仍将花费时间重排/布局页面
• 可见性是继承的,因此这意味着您可以通过赋予子可见性使子图可见:visible;

display:none;

• 将使元素不参与流/布局
• 可以(取决于使用的浏览器)杀死Flash电影和iframe(会在重新显示时重新启动/重新加载),尽管你可以通过iframe阻止这种情况发生
• 元素不会占用任何空间.出于布局目的,它就像它不存在一样
• 将使某些浏览器/设备(如iPad)直接收回该元素使用的内存,如果您在动画期间在无和其他值之间切换,则会导致小的hickup

额外说明:

• 隐藏内容中的图像:在所有流行的浏览器中,图像仍然被加载,即使它们位于具有可见性的任何元素内:隐藏; 或显示:无;
• 隐藏内容中的字体: webkit浏览器(Chrome/Safari)可能会延迟加载仅用于隐藏元素的自定义字体,包括通过可见性或显示.这可能会导致您在加载自定义字体之前测量仍使用后备字体的元素.

Answer 3

display:none从html流中删除元素,而visibility:hidden则不会.