可见度有什么区别：hidden和display：none？
CSS规则visibility:hidden和display:none都导致元素不可见。 这些同义词吗？
display:none表示标签不会出现在页面上（尽pipe你仍然可以通过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:hiddenreplace[style-tag-value] visibility:hidden结果在：
test | | test
他们不是同义词。
display:none从页面的正常stream程中删除元素，允许其他元素填充。
visibility:hidden在页面的正常stream中的元素仍然占据空间。
想象一下，你坐在一个游乐园里，一个在线的人变得非常粗暴，以至于安全性把他们从线上拽出来。 然后，每个人都将前进一个位置，以填补现在的空位。 这就像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.
display:none从布局stream程中删除元素。
visibility:hidden隐藏它，但留下的空间。
当涉及到子节点时，有一个很大的区别。 例如：如果你有一个父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从页面stream中删除元素，页面的其余部分stream动，就好像它不在那里一样。
visibility: hidden隐藏元素而不是页面stream，在页面上留下空间。
display: none从页面中完全删除元素，并且构build页面，就好像元素根本就不存在。
Visibility: hidden即使您再也看不到它， Visibility: hidden文档stream中的空间。
这可能会或可能不会有很大的不同，取决于你在做什么。
具有visibility:hidden的对象仍然占据页面的垂直高度。 display:none它被完全删除。 如果您在图像下方display:none文本，而您display:none ，则文本将向上移动以填充图像所在的空间。 如果你做可视性：隐藏的文字将保持在同一个位置。
display:none将隐藏元素并折叠空间正在占用，而visibility:hidden将隐藏元素并保留元素空间。 display：none在IE和Safari的老版本中，也会影响javascript中的一些属性。
如果可见性属性设置为"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>
查看详情
除了所有其他的答案之外，IE8还有一个重要的区别：如果你使用display:none并试图获取元素的宽度或高度，那么IE8返回0（而其他浏览器将返回实际大小）。 IE8返回正确的宽度或高度仅用于visibility:hidden 。
visibility:hidden将元素保留在页面中，并占用该空间，但不会显示给用户。
display:none在页面中不会有任何内容不可用，也不占用任何空间。
visibility:hidden隐藏了一个元素，但是它仍然占据与之前相同的空间。 该元素将被隐藏，但仍然影响布局。
display:none隐藏一个元素，它不会占用任何空间。 该元素将被隐藏，页面将显示为不存在的元素：
visibility:hidden保留空间，而display:none不保留空间。
另一个区别是可见性：隐藏在真正的，真正旧的浏览器中，并且显示：没有：
