这种差异不仅体现在样式上，还体现在使用JavaScript操作元素时的行为上。

显示效果及副作用:无:

目标元素从文档流中取出(不影响其他元素的布局); 所有的后代都会受到影响(也不会显示出来，并且不能“跳出”这个继承); 测量不能用于目标元素，也不能用于它的后代元素——它们根本不被渲染，因此它们的clientWidth, clienttheight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect()， getComputedStyle()，都返回0。

可见性的影响和副作用:隐藏:

目标元素从视图中隐藏，但没有从流中取出并影响布局，占用其正常空间; 目标元素及其后代的innerText(但不是innerHTML)返回空字符串。

它们不是同义词——display:没有一个会从页面流中移除元素，页面的其余部分就像它不存在一样。

可见性:hidden在视图中隐藏元素，但不隐藏页面流，在页面上为其留下空间。

如果可视性属性设置为“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; 

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

可见性:隐藏保留空间，而显示:无不保留空间。

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

示例:https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Display: none将元素从页面中完全移除，并且构建页面时就好像该元素根本不存在一样。

可见性:隐藏保留文档流中的空间，即使您再也看不到它。

这取决于你在做什么，可能有也可能没有很大的区别。

Display:none表示所讨论的标签根本不会出现在页面上(尽管您仍然可以通过dom与它进行交互)。在其他标记之间不会为它分配空间。

可见性:隐藏意味着与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]:隐藏结果:

test |                        | test