display:none表示相关标签根本不会出现在页面上（尽管您仍然可以通过 dom 与它进行交互）。其他标签之间不会为其分配空间。
visibility:hidden表示与display:none不同，标记不可见，但在页面上为其分配了空间。标记已呈现，它只是在页面上看不到。
例如：
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test用display:none替换[style-tag-value]导致：
test | | test用visibility:hidden替换[style-tag-value]导致：
test | | test它们不是同义词。
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 事件仍会在链接上触发。这通常不是您想要的行为。选择文本时的行为也可能因浏览器而异。