Answers:
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 | | testvisibility: hidden和display: none会，因为他们被同样高性能两者再触发布局，涂料和复合材料。但是，opacity: 0它在功能上等同于visibility: hidden并且不会重新触发布局步骤，因此，如果您不介意仍在分配空白空间，则建议使用该方法（否则请使用display: none）。
opacity: 0在处理输入或按钮时应谨慎使用，因为它们仍将存在并可能引起奇怪的用户交互。
它们不是同义词。
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.（请务必点击上方的“运行代码段”按钮以查看结果。）
已经指出1和2之间的差异（即2仍然占用空间）。但是，2和3之间是有区别的。在情况3中，鼠标悬停在链接上时，鼠标仍将切换到手形，用户仍然可以单击链接，并且Javascript事件仍将在链接上触发。这通常不是您想要的行为（但有时是吗？）。
另一个区别是，如果选择文本，然后将其复制/粘贴为纯文本，则会得到以下信息：
1st link.
2nd link.
3rd unseen link.
在第3种情况下，文本确实会被复制。也许这对于某些类型的水印有用，或者如果您想隐藏如果用户不小心复制/粘贴了您的内容就会显示的版权声明？
在子节点方面有很大的不同。例如：如果您有一个父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 即使您无法再看到它，也会在文档流中留下空间。
这可能会或可能不会有很大的不同，具体取决于您在做什么。
随着visibility:hidden对象仍占用垂直高度在页面上。随着display:none它被完全删除。如果您在图片下方有文字并且您这样做了display:none，那么该文字将向上移动以填充图片所在的空间。如果您进行可见性：隐藏，则文本将保留在同一位置。
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
如果可见性属性设置为"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>另一个不同之处是，它visibility:hidden可以在非常古老的浏览器中运行，而display:none不能：
差异超出了样式，并反映在使用JavaScript操作元素时的行为方式。
的作用和副作用display: none：
clientWidth，clientHeight，offsetWidth，offsetHeight，scrollWidth，scrollHeight，getBoundingClientRect()，getComputedStyle()，所有返回0秒。的作用和副作用visibility: hidden：
innerText（但不是innerHTML）目标元素和后代返回空字符串。display:none;既不会显示元素，也不会在页面上为元素分配空间，而visibility:hidden;不会在页面上显示元素，但会在页面上分配空间。在两种情况下，我们都可以访问DOM中的元素。为了更好地理解它，请查看以下代码：
display：none vs visible：hidden
这里有很多详细的答案，但是我认为我应该添加它来解决可访问性，因为这会产生影响。
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;
}一个很好的做法是创建一个“跳至内容”链接，以链接到内容主体的锚点。视力障碍的用户可能不想在每个页面上都收听完整的导航树。使链接在视觉上隐藏。用户只需点击选项卡即可访问链接。
有关可访问性和隐藏内容的更多信息，请参见：