visibility和display

来源：互联网发布：手机抢号软件编辑：程序博客网时间：2024/06/05 00:14

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>

这里写图片描述

阅读全文

0 0