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

    css如何让div隐藏

    藏色散人藏色散人2021-04-25 09:30:50原创2526

    css让div隐藏的方法:1、使用“display:none”来隐藏div;2、使用“visibility: hidden;”隐藏div;3、使用“opacity: 0”隐藏div。

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

    在我们平时布局网站的时候,想要把p进行隐藏,但是很多人不知道css控制p显示隐藏?下面我们来讲解一下css如何让p隐藏。

    1、使用display:none来隐藏div

    我们可以使用display:none属性来隐藏所有的信息,包括文本和图片,语法为:

    <div>这里你是看不到的</div>

    当我们使用p中的css样式,我们就可以使用display:none属性对内容进行隐藏,并且通过浏览器也是看不到的,同时被隐藏的内容是不被占用空间的,隐藏之后的内容搜索引擎是不读取的,一般我们都是用使用js统计代码去隐藏显示的图标。

    2、使用visibility: hidden;隐藏div

    visibility 属性规定元素是否可见。

    这个属性指定是否显示一个元素生成的元素框。这意味着元素仍占据其本来的空间,不过可以完全不可见。值 collapse 在表中用于从表布局中删除列或行。

    属性值:

    3、使用opacity: 0隐藏div

    opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框(bounding box)而设计的。

    这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。这和上面的visibility: hidden 相似。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>元素隐藏--opacity: 0</title>
            <style>
                div{
                    height: 20px;
                }
                .demo{
                    width: 800px;
                    height: 60px;
                    margin: 50px auto;
                    border: 1px solid red;
                }
                .hide,span{
                    opacity: 0;
                }
            </style>
        </head>
        <body>
            <div>
                <div sty>元素隐藏1--opacity: 0</div>
                <div>元素隐藏2--opacity: 0</div>
                <div>元素隐藏3--opacity: 0</div>
            </div>
            <div>
            <div>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</div>
    
            <div>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</div>
            </div>
        </body>
    </html>

    效果图:

    【推荐学习:css视频教程

    以上就是css如何让div隐藏的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css
    上一篇:详解纯CSS实现文字渐变色的两种方式 下一篇:css边框显示不出来怎么办
    Web大前端开发直播班

    相关文章推荐

    • css如何进行单行注释• css如何实现li不换行显示• 详解纯CSS实现文字渐变色的两种方式• css如何添加背景• css怎么改变背景色

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网