细说HTML元素的隐藏和显示

CSS文档对HTML的显示和隐藏有2个属性可供选择：

1、display

2、visiblity

这2个有什么区别呢？

display：

display版本：CSS1/CSS2　 兼容性：IE4+ NS4+　继承性：有

语法：
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group 

取值：
block  :　 CSS1  块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行
none  :　 CSS1  隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline  :　 CSS1  内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行
inline-block  :　 IE5.5  将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内
list-item  :　 CSS2  将块对象指定为列表项目。并可以添加可选项目标志 

/** 以下值未支持 **/
compact  :　 CSS2  未支持。分配对象为块对象或基于内容之上的内联对象
marker  :　 CSS2  未支持。指定内容在容器对象之前或之后。要使用此参数，对象必须和 :after 及 :before 伪元素一起使用
inline-table  :　 CSS2  未支持。将表格显示为无前后换行的内联对象或内联容器
run-in  :　 CSS2  未支持。分配对象为块对象或基于内容之上的内联对象
table  :　 CSS2  未支持。将对象作为块元素级的表格显示
table-caption  :　 CSS2  未支持。将对象作为表格标题显示
table-cell  :　 CSS2  未支持。将对象作为表格单元格显示
table-column  :　 CSS2  未支持。将对象作为表格列显示
table-column-group  :　 CSS2  未支持。将对象作为表格列组显示
table-header-group  :　 CSS2  将对象作为表格标题组显示
table-footer-group  :　 CSS2  将对象作为表格脚注组显示
table-row  :　 CSS2  未支持。将对象作为表格行显示
table-row-group  :　 CSS2  未支持。将对象作为表格行组显示 

visibility：

visibility版本：CSS2　 兼容性：IE4+ NS6+　继承性：无

语法：
visibility : inherit | visible | collapse | hidden 

取值：
inherit  :　 默认值。继承父对象的可见性
visible  :　 对象可视
hidden  :　 对象隐藏 

collapse  :　 主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于 hidden。IE6及以下不支持此参数值

经过在IE、chrom、firfox中测试结果如下：

display的none会使被隐藏的对象释放被占用的空间

visibility的hidden不会使被隐藏的对象释放被占用的空间。

visibility的collapse在chrom下table并未释放空间，在IE和firfox下释放了。

翻阅了JQuery的show和hide方法的源码，发现其控制元素显示与否是通过display属性来控制的。