CSS中visibility与display的区别

CSS中visibility与display的区别
CSS中的属性visibility与display都可实现显示、隐藏元素的效果，但他们之间也有很大的区别。
visibility规定元素的内容是否显示；而display规定元素本身的现实方式，可以决定元素本身是否可见。
visibility的visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"时，虽然元素不可见，但它也会占据页面上的空间。
若想让其释放空间可以设置style.height = "0px"; style.width = "0px";也可将display属性设为：none。
以下是www.w3school.com.cn中对visibility与display的属性值的说明：
1.        visibility 属性规定元素是否可见。
可能的值
值
描述
visible
默认值。元素是可见的。
hidden
元素是不可见的。
collapse
当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit
规定应该从父元素继承 visibility 属性的值。
 
2.        display 属性规定元素应该生成的框的类型。
可能的值
值
描述
none
此元素不会被显示。
block
此元素将显示为块级元素，此元素前后会带有换行符。
inline
默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block
行内块元素。（CSS2.1 新增的值）
list-item
此元素会作为列表显示。
run-in
此元素会根据上下文作为块级元素或内联元素显示。
compact
CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker
CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table
此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table
此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group
此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group
此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group
此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row
此元素会作为一个表格行显示（类似 <tr>）。
table-column-group
此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column
此元素会