display:none;与visibility:hidden;的区别

visibility:隐藏对应的元素但不挤占该元素原来的空间。

display:隐藏对应的元素并且挤占该元素原来的空间。

下面来看visibility和dispaly的一些参数

visibility用来设置元素的可见状态。

语法：

visibility : inherit | visible | collapse | hidden

参数：

inherit : 　继承上一个父对象的可见性

visible : 　对象可视

hidden : 　对象隐藏

collapse : 　主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。

说明：

设置或检索是否显示对象。与display属性不同，此属性为隐藏的对象保留其占据的物理空间。

如果希望对象为可视，其父对象也必须是可视的。

对应的脚本特性为visibility。请参阅我编写的其他书目。

display用来设定元素的显示状态。

语法：

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　内联对象的默认值。用该值将从对象中删除行

compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象

marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用

inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器

list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志

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　将对象作为表格行组显示