css-元素的显示和隐藏

最新推荐文章于 2024-08-20 21:00:21 发布

零OO

最新推荐文章于 2024-08-20 21:00:21 发布

阅读量209

点赞数

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

本文链接：https://blog.csdn.net/qq_39111074/article/details/116494896

版权

前端专栏收录该内容

222 篇文章 8 订阅

订阅专栏

元素的显示和隐藏方法

元素的显示和隐藏可以使用这3种css属性：visibility、display、overflow
示例代码1：

<!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>
        .one {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .two {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

display：

display: none 隐藏元素
display: block 显示元素，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>
        .one {
            display: none;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .two {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

visibility：

visibility: hidden 隐藏元素
visibility: visible 显示元素

隐藏元素，页面上看不到该隐藏元素，占位置，该隐藏元素之前的位置保留，后面元素不会上移占据它的位置

<!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>
        .one {
            visibility: hidden;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        
        .two {
            width: 200px;
            height: 200px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

</html>

overflow：

overflow: visible 显示元素
overflow: hidden 隐藏元素
overflow: auto 隐藏元素
overflow: scroll 隐藏元素

超出元素大小的部分隐藏看不到

示例代码：未处理p元素

<!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>
        p {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 5px solid pink;
        }
    </style>
</head>

<body>
    <p>短尾矮袋鼠（学名：Setonix brachyurus）。它是最小的袋鼠之一，体高不到60厘米。短尾矮袋鼠是有袋目哺乳动物，看起来像老鼠一样。它们大多生活在澳大利亚西南海岸外的洛特尼斯岛。 [1] 因其胖嘟嘟的脸庞和“甜美”的笑容被称为“世界上最快乐的动物”。 [2] 仅一种，无亚种分化。 [3] 已被世界自然保护联盟列入濒危物种红色名录。 作为濒危物种红色名录上的物种，短尾矮袋鼠禁止买卖，但是它们却不害怕人类，并且很喜欢和人类的亲密接触。短尾矮袋鼠与其它有袋类动物如沙袋鼠和袋鼠一样在外表上有些相似，但它的皮毛更浓密、粗糙，为棕灰色的短毛，
        [5] 背部皮毛的颜色更浅， [3] 它有更轻盈的但能够让它以极大速度穿越茂密草丛的下肢。 它的身体矮胖而结实，有着一副驼背的身姿。顾名思义，它有一个明显的短尾巴。它有一个带着暗条纹的额头，短而圆润的耳朵，和一个裸露着的鼻子。与同类不同的是，短尾矮袋鼠后腿短而发达，使它跳或者爬上树时能高达1.5米， [5] 另外由于它们并不需要用尾巴来平衡，所以尾巴上几乎没有皮毛。短尾矮袋鼠的体重范围在1.5-4.5公斤，身长40-54cm，尾长26-30cm。</p>
</body>

</html>

效果：

添加overflow：hidden

<!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>
        p {
            overflow: hidden;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 5px solid pink;
        }
    </style>
</head>

<body>
    <p>短尾矮袋鼠（学名：Setonix brachyurus）。它是最小的袋鼠之一，体高不到60厘米。短尾矮袋鼠是有袋目哺乳动物，看起来像老鼠一样。它们大多生活在澳大利亚西南海岸外的洛特尼斯岛。 [1] 因其胖嘟嘟的脸庞和“甜美”的笑容被称为“世界上最快乐的动物”。 [2] 仅一种，无亚种分化。 [3] 已被世界自然保护联盟列入濒危物种红色名录。 作为濒危物种红色名录上的物种，短尾矮袋鼠禁止买卖，但是它们却不害怕人类，并且很喜欢和人类的亲密接触。短尾矮袋鼠与其它有袋类动物如沙袋鼠和袋鼠一样在外表上有些相似，但它的皮毛更浓密、粗糙，为棕灰色的短毛，
        [5] 背部皮毛的颜色更浅， [3] 它有更轻盈的但能够让它以极大速度穿越茂密草丛的下肢。 它的身体矮胖而结实，有着一副驼背的身姿。顾名思义，它有一个明显的短尾巴。它有一个带着暗条纹的额头，短而圆润的耳朵，和一个裸露着的鼻子。与同类不同的是，短尾矮袋鼠后腿短而发达，使它跳或者爬上树时能高达1.5米， [5] 另外由于它们并不需要用尾巴来平衡，所以尾巴上几乎没有皮毛。短尾矮袋鼠的体重范围在1.5-4.5公斤，身长40-54cm，尾长26-30cm。</p>
</body>

</html>