css如何隐藏一个div?

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

css隐藏div的方法:

1、display:none

css隐藏DIV及内容,完全隐藏内容与布局

解释:使用CSS单词display:none;完全隐藏文本及图片

使用div 中css样式display:none;将使得div内的内容隐藏通过浏览器什么也看不见,并且隐藏的内容也不会占用空间,通常用于JS特效隐藏、隐藏统计代码显示图标。

示例:

<html>
<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .show{
            height:100px;
            width:100px;
            display:none;
        }
    
    </style>
<body>
    <div id="tab">
        <h2>show</h2>
        <div class="show"></div>
        <h1>version</h1>
    </div>
</body>
</html>

效果图:

2.version:hidden

variable:hidden该div会被隐藏,但是依旧占样式空间,该div依然会影响布局

总结:display:none使div不存在,variable:hidden会保留div的宽高,占用一个空白区

示例:

<html>
<head>
<title></title>
</head>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .show{
            height:100px;
            width:100px;
            variable:hidden;
        }
    
    </style>
<body>
    <div id="tab">
        <h2>show</h2>
        <div class="show"></div>
        <h1>version</h1>
    </div>
</body>
</html>

效果图:

以上就是css如何隐藏一个div?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读