通过display或visibility来隐藏html元素的区别

1、使用style=”display:none;” 来隐藏html元素
将元素的显示设为无，元素在网页中不占任何的位置。

<input value="cc1"></input><input value="cc2" style="display:none;"></input><input value="cc3"></input>

显示html元素使用style=”display:block”。

2、使用style=”visibility:hidden;”来隐藏html元素
将元素隐藏，但是元素在网页中的位置还是被占着。

<input value="cc1"></input><input value="cc2" style="visibility:hidden;"></input><input value="cc3"></input>

显示html元素使用style=”visibility:visible”。
visibility还可以被设置为collapse和inherit。
collapse在表格元素中使用时，此值可删除一行或一列，但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。

<table border="1">
<tr><td>cc</td></tr>
<tr style="visibility:collapse;"><td>cc</td></tr>
<tr><td>cc</td></tr>
</table>

inherit从父元素继承 visibility 属性的值。