可见性有什么区别：hidden和display：none？
CSS规则visibility:hidden和display:none都导致元素不可见。 这些同义词吗？
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] visibility:hidden结果在：
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.上一篇: What is the difference between visibility:hidden and display:none?