CSS中元素隐藏的几种方式

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

安静的对折

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

阅读量2.4k

点赞数 1

分类专栏： CSS 文章标签： css html 前端定位 position

本文链接：https://blog.csdn.net/k491022087/article/details/52389453

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

说一说CSS中关于元素隐藏的几个小例子

1、overflow:hidden将超出部分隐藏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one {
            width: 300px;
            height: 150px;
            background: pink;
        }
    </style>
</head>
<body>
<div class="one">
    第一最好不相见，如此便可不相恋。 　　
    第二最好不相知，如此便可不相思。 　　
    第三最好不相伴，如此便可不相欠。 　　
    第四最好不相惜，如此便可不相忆。 　　
    第五最好不相爱，如此便可不相弃。 　　
    第六最好不相对，如此便可不相会。 　　
    第七最好不相误，如此便可不相负。 　　
    第八最好不相许，如此便可不相续。 　　
    第九最好不相依，如此便可不相偎。 　　
    第十最好不相遇，如此便可不相聚。 　　
    但曾相见便相知，相见何如不见时。 　　
    安得与君相诀绝，免教生死作相思。
</div>
</body>
</html>

我们可以看到内容超出了div的区域

给one类中添加overflow:hidden后超出的部分就被隐藏了

.one {
    width: 300px;
    height: 150px;
    background: pink;
    overflow: hidden;
}

2 display:none 隐藏元素不占位置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background: red;
            display: none;
        }
        .two {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>

第一个盒子被隐藏起来了，而且下面的盒子跑到第一个盒子的位置，所以不占据位置

3 visibility:hidden隐藏元素，占位置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one {
            width: 100px;
            height: 100px;
            background: red;
            visibility: hidden;
        }
        .two {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
<div class="one">1</div>
<div class="two">2</div>
</body>
</html>

第一个盒子虽然隐藏了，但是下面的盒子不会跑到第一个盒子的位置，说明第一个盒子还占据着原来的位置。

安静的对折

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中元素隐藏的几种方式

说一说CSS中关于元素隐藏的几个小例子1、overflow:hidden将超出部分隐藏 .one { width: 300px; height: 150px; background: pink; } 第一最好不相见，如此便
复制链接

扫一扫