• 技术文章 >web前端 >css教程

    css怎么使用display显示隐藏元素

    青灯夜游青灯夜游2021-04-28 18:21:47原创1884

    css使用display显示隐藏元素的方法:1、给元素设置“display:none;”样式即可隐藏元素;2、给元素设置“display:block;”样式即可将隐藏的元素显示出来。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    css display属性

    display 属性规定元素应该生成的框的类型。设置:

    说明:

    使用display: none;可以不占据空间的,把元素隐藏起来,所以动态改变此属性时会引起重排(改变页面布局),可以理解成在页面中把该元素删除掉一样;不会被子孙继承,但是其子孙是不会显示的,毕竟都一起被隐藏了。

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>元素隐藏--display:none</title>
            <style>
                .display{
                    display:none;
                }
            </style>
        </head>
        <body>
            <div>正常显示元素</div>
            <div class="display">隐藏元素</div>
            <div>正常显示元素</div>
    
        </body>
    </html>

    效果图:

    1.png

    (学习视频分享:css视频教程

    以上就是css怎么使用display显示隐藏元素的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css display
    上一篇:css如何实现水平居中 下一篇:css如何设置元素不可见
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css如何设置字体样式• css有哪些属性不继承父级的• css如何禁止滚动条• vue组件中如何引入css文件• css怎么设置最小宽度
    1/1

    PHP中文网