visibility和display

最新推荐文章于 2024-10-31 19:00:00 发布

原创最新推荐文章于 2024-10-31 19:00:00 发布 · 394 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#display #visibility

CSS 专栏收录该内容

16 篇文章

订阅专栏

本文对比了CSS中display和visibility属性的功能差异。display属性通过设置元素的显示方式，如none可完全移除元素；visibility属性则使元素可见或不可见，hidden使元素不可见但保留其空间。示例代码展示了不同设置下页面布局的变化。

visibility和display这两个属性很容易被混淆，比如它们看起来是干一样的事情，就是将让我们看不见元素。

display通常可以设置为：none，inline，block
visibility通常可以设置为：hidden，visible

display：none;
visibility:hidden;

这两条样式都能使得元素隐藏。但是，display会将元素掉，并且位置不再占用。而visibility则是占据原来的位置。

如下：
（1）没有设置

<html>
<head>
<style type="text/css">

</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>

</body>

</html>

这里写图片描述
（2）display:none

<html>
<head>
<style type="text/css">
p.margin{display:none}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>

</body>

</html>

这里写图片描述
（3）visibility:hidden

<html>
<head>
<style type="text/css">
p.margin{visibility:hidden}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>

</body>

</html>

这里写图片描述