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

最新推荐文章于 2022-11-10 20:51:13 发布

转载最新推荐文章于 2022-11-10 20:51:13 发布 · 820 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/kandyvip/p/3210296.html

文章标签：

#html #css

本文详细对比了CSS中三种隐藏元素的方法：display, visibility 和服务器控件的 visible 属性。通过具体示例阐述了它们的区别及应用场景，帮助读者理解何时使用何种方式来隐藏网页元素。

说到标签的隐藏，你们会用到什么呢？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，意思分别为：无此属性、可见。

转载于:https://www.cnblogs.com/kandyvip/p/3210296.html