隐藏与显示：display/visibility/visible 区别

本文最近更新于 2018 年 05 月 14 日

说到标签的隐藏，你们会用到什么呢？display？visibility？还是服务器控件的 visible？

显然，这三者都能起到隐藏与显示的效果，但是用途却完全不一样，请看用法与区别：

<div style="display:">显示</div>
<div style="display:none;">隐藏不占位</div>

<div style="visibility:">显示</div>
<div style="visibility:hidden;">隐藏占位</div>

<div visible="true" runat="server">显示</div>
<div visible="false" runat="server">消失不占位</div>

说明：

1）display
隐藏必须使用 none 值，该隐藏不占位，页面源代码可见。
显示可使用空或 block 或 inline，意思分别为：无此属性、显示视为 DIV（有换行符）、显示视为 span（无换行符）。

2）visibility
隐藏必须使用 hidden 值，该隐藏占位，页面源代码可见。
显示可使用空或 visible，意思分别为：无此属性、显示。

3）visible（服务器控件）
隐藏必须使用 false 值与 runat="server"，该隐藏不占位，页面源代码不可见。
显示可使用空或 true，意思分别为：无此属性、可见。

via https://www.cnblogs.com/kandyvip/p/3210296.html