CSS规则visibility:hidden和display:none都导致元素不可见。这些是同义词吗？
display:none意味着所讨论的标签根本不会出现在页面上(尽管您仍然可以通过DOM与之交互)。其他标签之间不会为其分配空间。
visibility:hidden表示与display:none不同，标记不可见，但在页面上为其分配了空间。标记被呈现，只是在页面上看不到。
例如：
1
| test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test |
用display:none替换[style-tag-value]导致：
用visibility:hidden替换[style-tag-value]会导致：
1
| test | | test |
- 对彼此的表现没有评论？我很好奇用哪种方法来隐藏绝对定位的元素，这些元素经常被显示和隐藏。
- 这是一个总的猜测，我没有做任何测试，但我想他们是差不多一样的。一旦屏幕上的某些东西发生变化，整个屏幕就会重新渲染(至少以前是这样)，所以这并不重要。你还在强制屏幕重新喷漆。不过，这很可能是一个浏览器一个浏览器，事实上，优化代码的方法可能比专注于这些方法要好。
- 如果我在用于FF的样式表中使用display: none，则IE版本不显示任何内容。你觉得是虫子吗？
- @Kevin的观点是正确的，因为visibility: hidden和display: none都具有相同的性能，因为它们都是重卷布局、油漆和复合材料。但是，opacity: 0在功能上相当于visibility: hidden，并且不会重新触发布局步骤，因此我建议您使用它，如果您不介意仍在分配空白空间(否则使用display: none)。
- 在讨论可视性和显示时，记住CSS转换是很重要的。例如，从visibility:hidden；切换到visibility:visible；允许使用CSS转换，而从display:none；切换到display:block；则不允许。visibility:hidden还有不捕获javascript事件的额外好处，而opacity:0；捕获事件。
- @迈克尔的优点。但是，请注意，尽管在可见性更改上支持CSS转换，但GPU并不能很好地实现这一点。(想想移动/结巴)。
- @伊桑很有意思，你有没有考试？我相信每个使用可见性的元素都有一些额外的内存使用：当浏览器保持元素处于"就绪"状态时隐藏。如果有大量使用visibility:hidden的元素，我肯定会看到它损害了性能。例如，我不会使用此方法在视区之间进行转换，而是将其用于在视区内转换按钮。
- @用它和按钮或类似的小面积(层)应该是好的。我正在尝试非画布菜单，在那里我保持菜单的可见性：隐藏(不影响SEO，如果它确实影响的话)和点击我是让它与过渡可见-检查它在Chrome时间轴和高工作负荷。随后发现，这类似于提到GPU的优势是众所周知的translate/rotate/skew/opacity(www.html5rocks.com/en/tutorials/speed/high performance anim&zwnj；&8203；ations)。但是，我不理解使用转换的可见性更改——…(下一篇文章)
- (来自上一个)…它要么是对的，要么是错的(可见的/隐藏的)。可能，转换有助于在第一个raf或非常接近的地方创建缓冲区。稍微偏离：签出新的"will change"属性。你甚至可以把它用于那些GPU擅长的领域。我见过黄油光滑使用这个(但不在能见度)即使在低端小米手机。参考：dev.opera.com/articles/css-will-change-property
- @Michaeldeleal这里有另一个链接(从我的参考列表中)可以帮助你。这给出了一个带有display:none->something的示例。indiegamr.com/&hellip；
- 在处理输入或按钮时，应谨慎使用opacity: 0，因为它们仍然存在，可能会导致奇怪的用户交互。
- visibility: collapse;也不会分配空间。developer.mozilla.org/en-us/docs/web/css/visibility
- @实际上，Jayrobin-display: none比visibility: hidden的性能稍好一些。如果你只处理一些对象，这不会太明显，但是我已经看到使用display: none而不是visibility: hidden来优化1K+对象的游戏时，性能会大幅提高。
- @agnelvishal-如您引用的链接中所述，visibility: collapse执行名称对表元素、flex项和xul元素的含义。"对于其他元素，折叠被视为隐藏。"
它们不是同义词。
display:none从页面的正常流中删除元素，允许其他元素填充。
visibility:hidden将元素保留在页面的正常流中，以便仍然占用空间。
想象一下，你在游乐园排队搭车，排队的人太吵闹了，保安把他们从排队的队伍里拽了出来。然后排队的每个人都向前移动一个位置，填满现在空的位置。这就像display:none。
这与类似的情况形成对比，但你面前的人穿上了隐形斗篷。当你看到这条线的时候，你会觉得有一个空的空间，但是人们不能真正填满这个空的空间，因为有人还在那里。这就像visibility:hidden一样。
- 它们之间还有一个很大的区别：至少在chrome中，可视性可以与转换延迟一起使用，但显示忽略了它。
还有一件事值得补充，尽管没有人问，但第三种选择是使对象完全透明。考虑：
1
2
3
| 1st unseen link.<br />
2nd unseen link.<br />
3rd unseen link. |
在这种情况下，您可以得到：
1
2
3
| 1st link.
2nd link.
3rd link. |
已经指出了1和2之间的区别(即2仍然占用空间)。但是，2和3之间有区别：在情况3中，鼠标悬停在链接上时仍会切换到手上，用户仍然可以单击链接，并且javascript事件仍会在链接上触发。这通常不是你想要的行为。选择文本时的行为也可能因浏览器而异。
- 为什么是变焦部分？
- 你为什么要这么做？：)我不知道，在较新的IE版本上可能不需要缩放部件。在IE 6中，它确实是需要的。
- 这是我发现的一篇讨论整个缩放/过滤的文章。看起来像是在想物体的位置。约瑟夫.randomnetworks.com/archives/2006/08/16/&hellip；
- @格林奥德曼，你能举个例子吗？下面是一个jsFiddle，其中一个隐藏元素(我尝试了DIV和SPAN)是其容器中唯一的元素，它仍然占用空间：jsFiddle.net/RMB5wdld/1
- @基普，奇怪——我现在不能这样做(我也改变了我自己的项目)。好的，我最好删除我以前的评论，当我有一个可靠的测试用例时，我会显示它，对噪音感到抱歉。
display:none从布局流中删除元素。
visibility:hidden隐藏了它，但留下了空间。
在子节点方面有很大的不同。例如：如果您有一个父DIV和一个嵌套的子DIV，那么如果您这样写：
在这种情况下，将看不到任何分区。但是如果你这样写：
然后子DIV将可见，而父DIV将不显示。
- 关于儿童的例子。
- 好的，这很容易错过。display:none/block不会触发转换，因此使用visibility:hidden可以工作，但是子元素也需要vilibility:hidden同时
- 这是一个很好的观点。谢谢你
它们不是同义词-display: none从页面流中删除元素，而页面流的其余部分就好像不存在一样。
Visibility: hidden将元素隐藏在视图中，而不是页面流中，在页面上为元素留有空间。
display: none完全从页面中删除元素，页面的构建就像元素根本不存在一样。
Visibility: hidden在文档流中留下了空间，即使您再也看不到它。
这可能会或可能不会产生很大的影响，这取决于你在做什么。
- 使用$('element').remove()完全从页面(dom)中删除元素。不显示或不使用空格并不意味着删除它。您仍然可以使用简单的$('element').show()更改其状态，因此它不是"完全删除"。
使用visibility:hidden时，对象仍然占据页面的垂直高度。使用display:none，它被完全移除。如果图像下有文本，并且执行display:none，则该文本将向上移动以填充图像所在的空间。如果执行visibility:hidden，文本将保留在同一位置。
- 与隐藏，是保留空间的垂直尺寸唯一。水平方向怎么样？
- 同时保留水平尺寸。
display:none将隐藏元素并折叠正在占用的空间，而visibility:hidden将隐藏元素并保留元素空间。显示：无也会影响旧版本IE和Safari中JavaScript提供的一些属性。
除了所有其他答案外，IE8还有一个重要的区别：如果使用display:none并尝试获取元素的宽度或高度，IE8返回0(而其他浏览器将返回实际大小)。IE8只为visibility:hidden返回正确的宽度或高度。
visibility:hidden保留了空间；display:none没有。
它在页面上不可用，也不占用任何空间。< BR>
它隐藏了一个元素，但仍将占用与以前相同的空间。元素将被隐藏，但仍会影响布局。
visibility: hidden保留空间，而display: none不保留空间。
不显示示例：https://www.w3schools.com/css/tryit.asp？文件名=Trycss_显示_无
可见性隐藏示例：https://www.w3schools.com/cssref/tryit.asp？文件名=Trycss_可见性
如果Visibility属性设置为"hidden"，则即使内容不可见，浏览器仍将占用页面空间。但是当我们将对象设置为"display:none"时，浏览器不会在页面上为其内容分配空间。
例子：
1
2
3
4
5
| Content not display on screen and even space not taken.
Content not display on screen but it will take space on screen. |
查看详细信息
visibility:hidden将保留页面中的元素并占用该空间，但不会向用户显示。
display:none在页面中不可用，也不占用任何空间。
另一个区别是，visibility:hidden在真正的、真正的老浏览器中工作，而display:none不：
https://www.w3schools.com/cssref/pr_class_visibility.asp网站
网址：https://www.w3schools.com/cssref/pr_class_display.asp
display:none;既不显示元素，也不在页面上为元素分配空间，而visibility:hidden;不在页面上显示元素，而是在页面上分配空间。在这两种情况下，我们都可以访问DOM中的元素。要更好地理解它，请查看以下代码：显示：无vs可见性：隐藏