可见性：隐藏和显示：无有什么区别？

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。

---

值得添加的一件事是，虽然没有被问到，但还有第三个选项可以使对象完全透明。考虑：

第一个 unseen 链接。
第二个 unseen 链接。
第三个 unseen 链接。

（请务必单击上方的“运行代码片段”按钮以查看结果。）

1 和 2 的区别已经指出（即 2 仍然占用空间）。但是，2 和 3 有区别：在情况 3 中，鼠标悬停在链接上时仍然会切换到手，用户仍然可以点击链接，并且仍然会在链接上触发 Javascript 事件。这通常不是您想要的行为（但有时可能是？）。

另一个区别是，如果您选择文本，然后复制/粘贴为纯文本，您将获得以下信息：

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

在案例 3 中，文本确实被复制了。也许这对于某种类型的水印很有用，或者如果您想隐藏如果用户不小心复制/粘贴您的内容时会出现的版权声明？

---

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 在文档流中留下空间，即使您看不到它。

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

---

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

---

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

---

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

---

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

---

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

---

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

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

---

显示：无

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

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

可见性：隐藏

它会将元素留在页面的正常流程中，从而仍然占用空间。

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

其他一些隐藏元素的方法

使用 z-index

#element {
   z-index: -11111;
}

将元素移出页面

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

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

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

CSS-transition 属性也是我们需要注意的重要事项。因为从 visibility: hidden 切换到 visibility: visible 允许使用 CSS 转换，而从 display: none 切换到 display: block 则不允许。 visibility: hidden 具有不捕获 JavaScript 事件的额外好处，而 opacity: 0 捕获事件

---

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

---

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

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

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

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

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

https://webaim.org/techniques/skipnav/

---

另一个区别是 visibility:hidden 可以在非常非常旧的浏览器中工作，而 display:none 不能：

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

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

---

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

display: none 的效果和副作用：

目标元素从文档流中取出（不影响其他元素的布局）；

所有后代都受到影响（也不显示，也不能“跳出”这个继承）；

无法对目标元素及其后代进行测量——它们根本不会被渲染，因此它们的 clientWidth、clientHeight、offsetWidth、offsetHeight、scrollWidth、scrollHeight、getBoundingClientRect()、getComputedStyle() 都返回 0。

visibility: hidden 的效果和副作用：

目标元素隐藏在视图之外，但没有被移出流程并影响布局，占用其正常空间；

目标元素和后代的 innerText（但不是 innerHTML）返回空字符串。

---

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

---

总结所有其他答案：

具有可见性的可见性显示元素：隐藏，为所有实际目的而隐藏（鼠标指针、键盘焦点、屏幕阅读器），但仍占用渲染标记元素中的空间 display:none，为所有实际目的而隐藏（鼠标指针、键盘焦点） ，屏幕阅读器），并且不占用渲染标记中的空间 css 过渡可应用于可见性更改 css 过渡不能应用于显示更改您可以使父可见性：隐藏但具有可见性的子级：可见时仍会显示parent 是 display:none，children 不能覆盖并使自己可见 DOM 树的一部分（因此您仍然可以使用 DOM 查询来定位它） DOM 树的一部分（因此您仍然可以使用 DOM 查询来定位它）的一部分渲染树不是渲染树的一部分父元素或子元素中的任何重排/布局也可能会触发这些元素中的重排，因为它们是渲染树的一部分。父元素中的任何回流/布局都不会影响这些元素，因为它们不是渲染树的一部分，在可见性：隐藏和可见之间切换，可能不会触发回流/布局。 （根据此评论，它确实：可见性：隐藏和显示：无之间有什么区别？可能也根据此 https://developers.google.com/speed/docs/insights/browser-reflow ）之间切换display:none to display: （其他），将导致布局/重排，因为此元素现在将成为渲染树的一部分您可以通过 DOM 方法测量元素您不能使用 DOM 方法测量元素或其后代如果你有大量使用可见性的元素：页面上没有，浏览器可能会在渲染时挂起，因为所有这些元素都需要布局，即使它们没有显示如果你有大量使用 display:none 的元素，它们会'不影响渲染，因为它们不是渲染树的一部分

资源：

https://developers.google.com/speed/docs/insights/browser-reflow

http://www.stubbornella.org/content/2009/03/27/reflows-repaints-css-performance-making-your-javascript-slow/

可见性之间的性能差异：隐藏和显示：无

其他信息：

也有一些浏览器支持特性，但它们似乎适用于非常旧的浏览器，并且在其他答案中可用，所以我没有在这里讨论它们。

还有其他一些隐藏元素的替代方法，例如不透明度或屏幕外的绝对定位。所有这些都在某些或其他答案中被触及，并且有一些缺点。

根据此评论（可见性：隐藏和显示之间的性能差异：无），如果您有很多元素使用显示：无并且您更改为显示：（其他），它将导致单次回流，而如果您有多重可见性：隐藏元素并将它们变为可见，它将导致每个元素的回流。 （我真的不明白这个）

---

如本堆栈其他地方所述，两者不是同义词。 visibility:hidden 将在页面上留出空间，而 display:none 将完全隐藏元素。我认为谈论这如何影响给定元素的子元素很重要。如果您要使用 visibility:hidden，那么您可以使用正确的样式显示该元素的子元素。但是使用 display:none，无论您是否使用 display: block | flex | inline | grid | inline-block，您都会隐藏孩子。

---