css怎么占位隐藏元素-木庄网络博客

css怎么占位隐藏元素

2022-03-17 11:58:59 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

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>