visible：hidden和display：none有什么区别？

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

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;
}

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

For more on accessibility and hidden content, see:

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/

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

display:none 在页面中将不可用，并且不占用任何空间。

如果可见性属性设置为"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>

查看详情

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

另一个不同之处是，它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; 

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

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

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

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

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

随着visibility:hidden对象仍占用垂直高度在页面上。随着display:none它被完全删除。如果您在图片下方有文字，并且这样做了display:none，该文字将向上移动以填充图片所在的空间。如果您进行可见性：隐藏，则文本将保留在同一位置。

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

Visibility: hidden 即使您无法再看到它，也会在文档流中留下空间。

这可能会或可能不会有很大的不同，具体取决于您在做什么。

在子节点方面有很大的不同。例如：如果您有一个父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将不显示。

它们不是同义词。

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

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

想象一下，您在游乐园中排队，而排队中的某人变得粗暴到安全都将他们从排队中拔出。然后，排队的每个人都会向前移动一个位置，以填补现在空的位置。这就像display:none。

与之类似的情况则与此相反，但是您前面的某人戴上了隐形斗篷。在查看线条时，看起来好像有一个空白空间，但是由于有人仍在，所以人们无法真正填充该空白空间。这就像visibility:hidden。

值得一提的是，尽管没有要求，但还有第三种方法可以使对象完全透明。考虑：

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事件仍会在该链接上触发。这通常不是您想要的行为。选择文本时的行为也可能因浏览器而异。

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

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

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

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

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