CSS规则visibility：hidden和display：none都导致该元素不可见。这些是同义词吗？

解决方案

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

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

" 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从页面上完全删除元素，页面的构建就好像元素根本不在那儿一样。

"可见性：隐藏"会在文档流中留下空间，即使我们再也看不到它。

这可能会或者可能不会有很大的不同，具体取决于我们正在执行的操作。

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

"可见性：隐藏"将元素从视图中隐藏，但不从页面流中隐藏，从而在页面上为其留出空间。

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

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

它们不是同义词。

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