css元素的显示与隐藏

最新推荐文章于 2023-07-05 14:20:09 发布

御弟謌謌

最新推荐文章于 2023-07-05 14:20:09 发布

阅读量205

点赞数

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

本文链接：https://blog.csdn.net/abraham_ly/article/details/109558862

版权

前端专栏收录该内容

52 篇文章 4 订阅

订阅专栏

css元素的显示与隐藏

1、display属性：显示隐藏，不保留位置（重点）

display:none; 隐藏元素
display:block; 除了转换为块级元素，还有使元素显示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display显示与隐藏</title>
    <style>
        .peiqi {
            /* display: block; */
            display: none;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .qiaozhi {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="peiqi">佩奇</div>
    <div class="qiaozhi">乔治</div>
</body>

</html>

2、visbility属性：显示隐藏，保留原来的位置

visbility:visible; 元素显示
visbility:hidden; 元素隐藏

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .peiqi {
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .qiaozhi {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div class="peiqi">佩奇</div>
    <div class="qiaozhi">乔治</div>
</body>

</html>

3、overflow属性：溢出部分显示隐藏，对于溢出部分的一个处理

overflow属性指定了如果内容溢出一个元素的框，会发生什么
overflow:visible; 不剪切内容，也不添加滚动条
overflow:hidden; 不显示超出对象尺寸的内容，超出部分隐藏
overflow:scroll; 不管超出多少，总是显示滚动条
overflow:auto; 超出自动添加滚动条，否则不添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .peiqi {
            /* 不剪切 不加滚动条 */
            overflow: visible;
            /* 超出部分隐藏 */
            overflow: hidden;
            /* 整体加个滚动条 */
            overflow: scroll;
            /* 溢出的时候加滚动条，不溢出不加滚动条 */
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 3px solid pink;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div class="peiqi">
        佩奇是一只非常可爱的小猪，她和母父、弟弟乔治生活在一起。她喜欢的玩具是泰迪。她最喜欢跳泥坑，最喜欢吃的是意大利面和巧克力蛋糕，最喜欢扮成小仙女公主，最喜欢喝橙汁，也很喜欢回姥姥姥爷、伯父伯母家玩。
佩奇的姥姥应该叫猪姥姥，但是翻译错了，成了猪奶奶。
就像唐老鸭的舅舅：史高治·麦克达克。最初翻译成了叔叔。
就像唐老鸭的甥儿：辉儿·达克/Huey Duck、杜儿·达克/Dewey Duck、路儿·达克/Louie Duck（唐纳德的甥男们）。最初也翻译错了。成了侄儿。
    </div>
</body>
</html>