css隐藏html元素的方法

最新推荐文章于 2023-07-05 23:59:29 发布

辉娜

最新推荐文章于 2023-07-05 23:59:29 发布

阅读量73

点赞数

分类专栏： css 文章标签： html5 css3 前端

本文链接：https://blog.csdn.net/weixin_44211097/article/details/119874837

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1)visibility: hidden

是许多人在隐藏某个HTML元素时的首选。如页面中图片不见了，但是也没中原来图片的位置留下了一片空白区域。这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。
设置visibility: visible可以使隐藏的元素变为可见。

2)设置opacity: 0

    可以使一个元素变得完全透明，从而制作出和visibility: hidden一样的效果。opacity和visibility相比，其优势在于它可以被transition和animate。
    通常可以使用opacity属性来制作元素的淡入淡出效果。
    设置opacity:1可以使透明元素变得可见。

3)position: absolute
    最古老和最标准的做法是设置元素的绝对定位来隐藏元素。这种技术使元素脱离文档流，处于普通文档之上，并给它设置一个很大的left负值定位，使元素定位在可见区域之外。float和margin都不能影响到position: absolute的元素，因此它们可以很好的被隐藏起来。
    在制作一些元素的直线动画时，使用这种技术是最好的方法。
    要使元素再次变得可见，可以增大left的值，使元素出现在屏幕上。

4)display: none
    display: none也是一个非常老的技术，它是position: absolute和visibility: hidden; 的折中方法，元素会变得不可见，并且不会再占用文档的空间。
    display: none在制作手风琴效果时十分有用。
    将元素设置为display: block或其它值可以使元素再次可见。


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        .wrapper {
            width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .visibility,
        .opacity,
        .absolute,
        .none {
            width: 300px;
            height: 100px;
        }

        /* 分别添加隐藏 */
        .visibility {
            background-color: wheat;
            /* visibility: hidden; */
        }

        .opacity {
            background-color: yellow;
            /* opacity: 0; */
        }

        .absolute {
            background-color: rgb(122, 113, 100);
            /* position: absolute;
            left: -500px; */
        }

        .none {
            background-color: coral;
            display: none;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <!-- visibility -->
        <div class="visibility">
            这是visbility隐藏</div>
        <!-- opacity -->
        <div class="opacity">
            这是opacity隐藏</div>
        <!-- absolute -->
        <div class="absolute">
            这是绝对定位隐藏</div>
        <!-- <dispaly:none> -->
        <div class="none">
            这是display隐藏</div>
        <h2 style="text-align: left;">脱离了文档流，这里就会上浮</h2>
    </div>
</body>

</html>

运行结果：

辉娜

关注

0
点赞
踩
0

收藏

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

1)visibility: hidden是许多人在隐藏某个HTML元素时的首选。如页面中图片不见了，但是也没中原来图片的位置留下了一片空白区域。这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在。设置visibility: visible可以使隐藏的元素变为可见。 2)设置opacity: 0可以使一个元素变得完全透明，从而制作出和visibility: hidden一样的效果。opacity和visibility相比，其优势在于它可以被transition...
复制链接

扫一扫

专栏目录