首页>>网站建设>>Javascript>>经验笔记

在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>
• <a>

那么问题来了，这里讨论这个干啥呢？

其实display可以改变块元素以及内联元素的该属性，也就是说display可以把内联元素设置成块元素，把块元素设置成内联元素。

1、把内联元素设置成块元素

span {display:block;}

2、把块元素设置成内联元素

div {display:inline;}

学习不止眼前的教程与笔记还需实践与创新——小伙伴们块动手试试吧~