CSS基础教程（十五） 隐藏与显示display、Visibility

在CSS中想要控制标签元素的显示与隐藏可以通过display,Visibility属性来实现。

一、CSS display属性

使用display属性来隐藏元素只需要设置其值为none即可，并且隐藏之后标签元素所占的空间也会被收回，就是说隐藏之后的标签元素不占用任何空间的。如果想要设置其显示只需要把display属性的值设置成block即可，并且会占用本该占用的空间。

h1.hidden {display:none;}

二、CSS visibility属性

使用visibility属性来隐藏标签元素需要把值设置成hidden，与display不同的是，通过visibility隐藏的元素会占用隐藏前的空间，例如：

<style>
.d1{
    visibility: hidden;
}
</style>
<div>这里是不隐藏的第一行</div>
<div class="">这里是不隐藏的第二行</div>
<div>这里是不隐藏的第三行</div>
<hr>
<div>这里是不隐藏的第一行</div>
<div class="d1">这里是不隐藏的第二行</div>
<div>这里是不隐藏的第三行</div>

上面实例输出的是一样的代码，只是下面的第二行通过visibility隐藏了，但是和上面没有隐藏的一样效果，占据了空间。

三、CSS display属性的不同用法

大家都知道，在CSS中存在块元素以及内联元素之分，所谓块元素就是会占用一行全部宽度，在前后都是换行符，如：

• <h1>-<h6>
• <p>
• <div>

span {display:block;}

div {display:inline;}