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

2017-01-14 11:32:02来源:CSDN作者:tiana0人点击

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 属性的值。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台