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

    css怎么占位隐藏元素

    青灯夜游青灯夜游2021-04-28 16:03:25原创1715

    css占位隐藏元素的方法:1、使用visibility属性,给元素设置“visibility: hidden;”样式即可,元素虽隐藏了,但仍占据其本来的空间;2、使用opacity属性,元素设置“opacity:0;”样式即可。

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

    方法1:使用visibility: hidden;隐藏占位

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

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

    示例:

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

    1.png

    方法2:使用opacity: 0隐藏占位

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

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

    示例:

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

    2.png

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

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css 占位隐藏
    上一篇:css如何改字体 下一篇:css怎么禁止选中文字
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 纯CSS实现美妙而有意思的背景效果!!• css为什么不能正常加载• css设置字体的属性有哪些• html/css怎么让input禁止输入• jsp与css的区别是什么
    1/1

    PHP中文网