css隐藏元素的一些方式

最新推荐文章于 2024-04-03 14:32:50 发布

借我一秋风

最新推荐文章于 2024-04-03 14:32:50 发布

阅读量177

点赞数

文章标签：定位 css

本文链接：https://blog.csdn.net/qq_53489791/article/details/119333269

版权

css隐藏元素的一些方式

1.display:none;

display 属性规定元素应该生成的框的类型；
设置display:none后，此元素不会被显示。使用 display:none属性后，元素的宽度、高度等各种属性值都将“消失”。

<style>
         div {
            background-color: cornflowerblue;
        }
        
        .box2 {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box1">1111</div>
    <div class="box2">2222</div>
    <div class="box3">3333</div>
</body>

效果图：
在这里插入图片描述

2. visibility:hidden;

visibility 属性规定元素是否可见。
设置visibility:hidden后，元素不会显示在页面上，但仍然影响布局。
只是在视觉上看不见，而它所占据的空间位置仍然存在，它仍具有高度、宽度等属性值。

 <style>
        div {
            background-color: cornflowerblue;
        }
        
        .box2 {
            display: none;
        }
    </style>

	<div class="box1">1111</div>
    <div class="box2">2222</div>
    <div class="box3">3333</div>

效果图：
在这里插入图片描述

3. opacity: 0;

opacity 属性可以设置元素的不透明。 opacity: 0，将元素的透明度设置为0后，我们不能在页面中看到该元素，这也可以作为一种隐藏元素的方法，但是元素的其他属性都存在。与visibility:hidden类似，但opacity可以设置动画和过渡。

<style>
        div {
            background-color: cornflowerblue;
        }
        
        .box2 {
            opacity: 0;
        }
    </style>

<body>
    <div class="box1">1111</div>
    <div class="box2">2222</div>
    <div class="box3">3333</div>
</body>

效果图：
在这里插入图片描述

4. overflow:hidden

设置height，width和内外边距属性值设为0，然后设置overflow:hidden来隐藏其子元素。

<style>
        div {
            background-color: cornflowerblue;
        }
        
        .box2 {
            overflow: hidden;
            width: 0;
            height: 0;
        }
    </style>

<body>
    <div class="box1">1111</div>
    <div class="box2">2222</div>
    <div class="box3">3333</div>
</body>

效果图：
在这里插入图片描述

5. position: absolute; left: -100000px;

设置元素的绝对定位，使元素脱离文档流，然后给它设置一个很大的left负值定位，让元素跑到可见区域之外。这样也可以使元素隐藏。不影响其他元素，但仍具有属性。

<style>
        div {
            background-color: cornflowerblue;
        }
        
        .box2 {
            position: absolute;
            left: -100000px;
        }
    </style>

<body>
    <div class="box1">1111</div>
    <div class="box2">2222</div>
    <div class="box3">3333</div>
</body>

效果图：
在这里插入图片描述

借我一秋风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css隐藏元素的一些方式

css隐藏元素的一些方式1.display:none;display 属性规定元素应该生成的框的类型；设置display:none后，此元素不会被显示。使用 display:none属性后，元素的宽度、高度等各种属性值都将“消失”。<style> div { background-color: cornflowerblue; } .box2 { display: none;
复制链接

扫一扫