Question

CSS规则visibility:hidden和display:none都会导致元素不可见。这些是同义词吗？

Answer 1

display:none表示相关标签根本不会出现在页面上（尽管您仍然可以通过dom与其进行交互）。其他标签之间不会为其分配空间。

visibility:hidden表示与display:none不同，标签不可见，但在页面上为其分配了空间。标记已呈现，只是在页面上看不到。

例如：

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

用[style-tag-value]替换display:none会导致：

test |   | test

用[style-tag-value]替换visibility:hidden会导致：

test |                        | test

Answer 2

他们不是同义词。

display:none从页面的正常流中删除元素，允许其他元素填充。

visibility:hidden将元素保留在页面的正常流中，这样仍占用空间。

想象一下，你正准备在游乐园里骑车，而且该线路上有人会如此吵闹，以至于安全人员将他们从线路上拽下来。然后排队的每个人都会向前移动一个位置来填补现在的空位。这就像display:none。

将此情况与类似情况进行对比，但是在你面前有人穿上隐身斗篷。在查看线条时，它看起来似乎有一个空的空间，但人们无法真正填满那个空洞的空间，因为有人还在那里。这就像visibility:hidden。

Answer 3

有一点值得补充，虽然没有被问到，但是有第三种方法可以使对象完全透明。考虑：

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

在这种情况下，你得到：

1st link.
2nd        link.
3rd        link.

已经指出了1和2之间的差异（即，2仍然占用空间）。但是，2和3之间存在差异：在情况3中，当鼠标悬停在链接上时鼠标仍将切换到手，用户仍然可以单击该链接，Javascript事件仍将在链接上触发。这通常不您想要的行为。选择文本时的行为也可能因浏览器而异。

Answer 4

display:none从布局流中删除元素。

visibility:hidden隐藏它但留下空间。

Answer 5

对于子节点，存在很大差异。例如：如果您有父div和嵌套子div。所以，如果你这样写：

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

在这种情况下，没有一个div可见。但如果你这样写：

<div id="parent" style="visibility:hidden;">
     <div id="child" style="visibility:visible;"></div>
</div>

然后子div将可见，而父div将不会显示。

Answer 6

它们不是同义词 - display: none从页面流中删除元素，页面的其余部分就像它不存在一样流动。

visibility: hidden隐藏视图中的元素，但不隐藏页面流，在页面上留出空间。

Answer 7

display: none完全从页面中删除元素，并且构建页面就像元素根本不存在一样。

即使您无法再看到它，

Visibility: hidden也会留下文档流中的空格。

这可能会也可能不会产生很大的不同，具体取决于你正在做什么。

Answer 8

使用visibility:hidden，对象仍占据页面的垂直高度。使用display:none时，它会被完全删除。如果您在图像下方有文字并且display:none，那么该文字将向上移动以填充图像所在的空间。如果您可见：隐藏文本将保留在同一位置。

Answer 9

display:none将隐藏元素并折叠占用的空间，而visibility:hidden将隐藏元素并保留元素空间。 display：none也会影响旧版IE和Safari中javascript提供的一些属性。

Answer 10

除了所有其他答案之外，IE8还有一个重要区别：如果您使用display:none并尝试获取元素的宽度或高度，IE8将返回0（而其他浏览器将返回实际大小）。 IE8仅为visibility:hidden返回正确的宽度或高度。

Answer 11

visibility:hidden保留空间; display:none没有。

Answer 12

display: none;

它不会在页面上显示，也不会占用任何空间。

visibility: hidden;

它隐藏了一个元素，但它仍然会占用与以前相同的空间。该元素将被隐藏，但仍会影响布局。

visibility: hidden保留空间，而display: none不保留空间。

显示无示例：https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

可见性隐藏示例：https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Answer 13

如果将可见性属性设置为"hidden"，则即使内容不可见，浏览器仍会在页面上占用内容空间。但是当我们将对象设置为"display:none"时，浏览器不会在页面上为其内容分配空间。

示例：

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

View details

Answer 14

visibility:hidden会将元素保留在页面中并占用该空间，但不会向用户显示。

display:none将无法在页面中显示，也不会占用任何空间。

Answer 15

另一个不同之处在于visibility:hidden适用于非常古老的浏览器，而display:none则不然：

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

Answer 16

display:none;既不会显示元素也不会为页面上的元素分配空间，而visibility:hidden;将不会在页面上显示元素，但会在页面上分配空间。在这两种情况下，我们都可以访问DOM中的元素。要以更好的方式理解它，请查看以下代码： display:none vs visibility:hidden

Answer 17

差异超出了样式，并反映在使用JavaScript操作元素时的行为方式。

display: none的作用和副作用：

目标元素从文档流中取出（不影响其他元素的布局）；
所有后代均受影响（也不会显示，也无法“捕捉”此继承）；
无法为目标元素或其后代进行测量–根本不会呈现它们，因此它们的clientWidth，clientHeight，offsetWidth，offsetHeight，{ {1}}，scrollWidth，scrollHeight，getBoundingClientRect()，都返回getComputedStyle()。

0的影响和副作用：

目标元素从视图中隐藏，但并未从流程中移出并影响布局，占据其正常空间；
目标元素的visibility: hidden（但不是innerText），后代返回空字符串。

Answer 18

这里有很多详细的答案，但是我认为我应该添加它来解决可访问性，因为这会带来影响。

display: none;和visibility: hidden;可能不会被所有屏幕阅读器软件读取。请记住，视障用户会遇到什么。

该问题还询问同义词。 text-indent: -9999px;彼此大致相等。与text-indent的重要区别在于，屏幕阅读器通常会读取它。由于用户仍然可以跳至链接，因此体验可能会有些糟糕。

关于可访问性，我今天看到的是多种样式的组合，以在屏幕阅读器可见的同时隐藏元素。

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

一个不错的做法是创建一个“跳至内容”链接，以链接到内容主体的锚点。视障用户可能不想在每个页面上都收听您的完整导航树。使链接在视觉上隐藏。用户只需点击标签即可访问链接。

有关可访问性和隐藏内容的更多信息，请参见：

Answer 19

显示：无

它将从页面的正常流程中删除该元素，从而允许其他元素填充。

一个元素根本不会出现在页面上，但是我们仍然可以通过DOM与它进行交互。其他元素之间将没有分配空间。

可见性：隐藏

它将元素保留在页面的正常流程中，使其仍占据空间。

一个元素不可见，并在页面上为其分配了元素的空间。

其他一些隐藏元素的方式

使用 z-index

#element {
   z-index: -11111;
}

将元素移出页面

#element {
   position: absolute; 
   top: -9999em;
   left: -9999em;
}

有关可见性的有趣信息：隐藏和显示：无属性

visibility: hidden和display: none的性能相同，因为它们都会重新触发布局，绘制和合成。但是，opacity: 0的功能与visibility: hidden等效，并且不会重新触发布局步骤。

CSS过渡属性也是我们需要注意的重要事项。因为从visibility: hidden切换到visibility: visible允许使用CSS过渡，而不允许从display: none切换到display: block。 visibility: hidden的另一个好处是不捕获JavaScript事件，而opacity: 0捕获事件

visibility：hidden和display：none之间有什么区别？

19 个答案: