登录
原创

css-元素的显示和隐藏

发布于 2021-04-30 阅读 40
  • CSS
  • HTML
原创

元素的显示和隐藏方法

元素的显示和隐藏可以使用这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>

image.png

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>

image.png

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>

image.png

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>

效果:
image.png

添加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>

image.png

添加overflow: scroll

image.png

添加overflow: auto

image.png

overflow: scroll 和 overflow: auto区别

当内容没有超过元素大小时,auto不会有滚轮效果,内容太多超出元素大小时,才有滚轮效果
image.png
scroll是一直有滚轮效果,不管内容多少,有没有超过元素大小
image.png

更多用法可以查看css手册

评论区

零00
1粉丝

时光荏苒,我自清欢

0

0

0

举报