学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>基础教程>>

CSS基础教程(十五) 隐藏与显示display、Visibility

发布时间:2020-01-11点击:

    在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;}

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

赞一个(0)     踩一个(0)    

相关链接

搜索

题库内容推荐