display和visibility到底有什么区别？

Question

display和visibility到底有什么区别？
请看如下两段代码：
<div style='display:none'> 
父容器 
    <div style="display:block">子容器 </div> 
</div>为什么此处看不到子容器内容，此处有继承存在吗？？？
<div style="visibility:hidden"> 
父容器 
    <div style='visibility:visible'>子容器 </div> 
</div>
为什么此处看到了子容器内容，此处有继承存在吗？？？
真把我搞晕了，请问display和visibility到底有什么区别？
什么时候使用display，而什么时候使用visibility啊？？？

Answer 1

display:noneTurns off the display of an element (it has no effect on layout); all child elements also have their display turned off. 
//隐藏这个元素;所有的子元素也跟着他隐藏.visibility:hidden
The box is invisible (fully transparent, nothing is drawn), but still affects layout.  Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
//这个容器不可见(完全透明),但占有布局.后代(子)元素将会显示,如果设有visible属性

Answer 2

display为none时,元素不占用页面流,就好像该元素不存在一样.
visibility为hidden时,仍然占用页面流,也就是这块区域虽然不可见,但是占据一块空间.
<div style="display:none">
dddddddddddddddddddddd
</div>
1111111111上面这样显示时,1111111111前面不会有任何东西挡住.当这样显示时<div style="visibility:hidden">
dddddddddddddddddddddd
</div>
1111111111
你会发现1111111111不再是紧贴着页面的顶部了.

Answer 3

以前做项目的时候用过visibility这个属性，设置这个属性visibility=‘hidden’时，该容器的确不显示了但是还占有空间。
后来修改为display=‘none’时，该层也不显示同时也不占空间。
得出以下结论：
   display为none时,元素不占用页面空间,就好像该元素不存在一样. 
   visibility为hidden时,仍然占用页面空间,也就是这块区域虽然不可见,但是占据一块空间. 

Answer 4

#1 滴解释清清楚楚！！display:none
Turns off the display of an element (it has no effect on layout); 
all child elements also have their display turned off. 
不显示该元素（该元素不影响布局，即不占位）；所有子元素也不显示。visibility:hidden
The box is invisible (fully transparent, nothing is drawn), but still affects layout.  Descendants of the element will be visible if they have visibility:visible (this doesn't work in IE up to version 7).
该容器不可见(完全透明，不绘制)，但仍然影响布局。如果后代(子孙)元素设置了 visibility:visible 样式将会显示（IE 7 以上版本无效，但俺在简体中文 IE 8 上测试了仍然有效！）Web 开发常用手册JScript语言参考.rar
http://download.csdn.net/source/308916DHTML参考手册.rar
http://download.csdn.net/source/308913样式表中文手册.chm
http://download.csdn.net/source/304124

Answer 5

回答的很正确，还有个就是visibility在火狐里面不兼容。

Answer 6

display ：none 后元素都不存在了。
visiably :hidden 只是隐藏一下，标签还存在。。

Answer 7

display:none; 显示（没有），在页面中不占预定义高宽。
visiably:hidden  不可见，也就是该层完全透明，但是在页面中占预定义高宽。

Answer 8

谢谢各位了！！！
不过我想知道的是：<div style='display:none'> 
父容器 
    <div style="display:block">子容器 </div> 
</div>父容器隐藏了，子容器看不到，这很好理解。
但是
<div style="visibility:hidden"> 
父容器 
    <div style='visibility:visible'>子容器 </div> 
</div>此处的父容器也隐藏了，子容器却能看到，这怎么理解啊？？？

Answer 9

visibility:hidden是透明化处理
若其中的子元素设为visibility:visible，那么该设置将覆盖掉父元素的设置，因此它会变得不透明