• 技术文章 >web前端 >前端问答

    css怎么隐藏元素但不占空间

    青灯夜游青灯夜游2022-06-01 19:34:40原创344

    两种方法:1、利用display属性,只需给元素添加“display:none;”样式即可。2、利用position和top属性设置元素绝对定位来隐藏元素,只需给元素添加“position:absolute;top:-9999px;”样式。

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

    css隐藏元素但不占空间的两种方法

    方法1:利用display属性

    只需给元素设置display:none;样式即可

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

    1.gif

    说明:

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

    方法2:利用position和top属性

    只需给元素添加position: absolute;top: -9999px;样式即可

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <style>
                .position{
                    position: absolute;
                    top: -9999px;
                }
            </style>
        </head>
        <body>
            <div>正常显示元素</div>
            <div class="position">隐藏元素</div>
            <div>正常显示元素</div>
        </body>
    </html>

    2.gif

    说明:

    该种方法是通过决定定位来让元素脱离文档流(不占空间),然后通过将元素的 top设置成足够大的负数,使它在屏幕上不可见。

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

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css CSS3
    上一篇:jquery中slice方法怎么用 下一篇:HTML5是应用程序开发语言吗
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• css3怎么实现元素过渡效果• 快看!10个不错的CSS实用小技巧(分享)• jquery怎么用CSS()设置鼠标禁止样式• css中margin-right什么意思• 引入css样式使用的标签是什么• css样式表由哪三部分组成
    1/1

    PHP中文网