[Web] CSS 中 Display(显示) 与 Visibility（可见性）的区别与用法

泰坦HW

发布于 2020-07-22 16:26:13

2.2K0

发布于 2020-07-22 16:26:13

文章被收录于专栏：Titan笔记

定义

在W3School上这两种CSS属性是这样定义的:

1.visibility 属性规定元素是否可见 2.display 属性规定元素应该生成的框的类型。

如果你想隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
所以，display:none 使得整个元素包括其占据的空间均隐藏，而visibility:hidden 仅仅会隐藏元素但是仍然会保留元素所占据的区域
根据具体情况来选择使用，一般来说 display:none 更加常用。

下面是两种方式的示例:

1.Display:None; 方式隐藏与显示元素

这是一个文本段落，点击按钮用Display样式隐藏与显示它

这是另外一个段落

Display隐藏 Display显示

2.Visibility方式隐藏与显示元素

这是一个文本段落，点击按钮隐藏与显示它

这是另外一个段落

Visibility隐藏 Visibility显示

你会不难看出这两种方式的区别和差异。

示例的相关代码

<p>1.Display:None; 方式隐藏与显示元素</p>
<div id="displayMethod" style="display: inline;"><strong>这是一个文本段落，点击按钮用Display样式隐藏与显示它</strong>
</div>
<div>这是另外一个段落</div>
<p><button class="btn" type="button" onclick="document.getElementById('displayMethod').style.display='none'">Display隐藏</button><br/>
<button class="btn" type="button" onclick="document.getElementById('displayMethod').style.display='inline'">Display显示</button></p>
<p>2.Visibility方式隐藏与显示元素</p>
<div id="visMethod" style="visibility: visible"><strong>这是一个文本段落，点击按钮隐藏与显示它</strong>
</div>
<div>这是另外一个段落</div>
<p><button class="btn" type="button" onclick="document.getElementById('visMethod').style.visibility='hidden'">Visibility隐藏</button><br/>
<button class="btn" type="button" onclick="document.getElementById('visMethod').style.visibility='visible'">Visibility显示</button></p>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020年02月23日，如有侵权请联系 cloudcommunity@tencent.com 删除

display