CSS元素的显示与隐藏

最新推荐文章于 2023-05-26 18:05:58 发布

qq_50636169

最新推荐文章于 2023-05-26 18:05:58 发布

阅读量82

点赞数 1

本文链接：https://blog.csdn.net/qq_50636169/article/details/119150825

版权

元素的显示与隐藏

让一个元素在页面中隐藏或显示出来。

display :显示隐藏
visibility:显示隐藏
overflow：溢出显示隐藏

1.display
设置一个元素如何显示，隐藏元素后不再占有原来的位置。
display：none；隐藏对象
display： block；除了转换为块级元素外，同时还有显示元素的意思

 <style>
        .Chinese {
            display: none;
            /* display: block; */
            width: 100px;
            height: 200px;
            background-color: yellow;

        }
        .math {
            width: 100px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="Chinese">语文</div>
    <div class="math">数学</div>
</body>

2.visibility
设置一个元素是可见还是隐藏，隐藏元素后，继续占有原来的位置。
visibility：visible；元素可见
visibility：hidden；元素隐藏

<style>
        .Chinese {
            visibility: hidden;
            width: 200px;
            height: 100px;
            background-color: yellow;

        }
        .math {
            width: 200px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="Chinese">语文</div>
    <div class="math">数学</div>
</body>

3.overflow
指定元素溢出其指定宽高时发生的现象。
overflow：hidden；
overflow：visible；
overflow；scroll；无论是否溢出都会显示滚动条
overflow；auto；根据需要显示滚动条

<style>
        .kuli {
            /* overflow: visible; */
            /* overflow: hidden; */
            /* scroll 溢出的部分显示滚动条  不溢出也显示滚动条 */
            /* overflow: scroll; */
            /* auto 溢出的时候才显示滚动条 不溢出不显示滚动条 */
            /* overflow: auto; */
            width: 200px;
            height: 100px;
            border: 3px solid yellow;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <div class="kuli">
        库里22投11中，三分14投4中.罚球11罚全中得到37分8篮板8助攻，职业生涯季后赛得分30+次数来到35次，超过哈登排名现役第3位,仅次于詹姆斯和杜兰特。
    </div>

注意：若一个盒子有定位，则慎用overflow：hidden，因为他会隐藏多余部分份。

qq_50636169

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS元素的显示与隐藏

元素的显示与隐藏让一个元素在页面中隐藏或显示出来。display :显示隐藏visibility:显示隐藏overflow：溢出显示隐藏1.display设置一个元素如何显示，隐藏元素后不再占有原来的位置。display：none；隐藏对象display： block；除了转换为块级元素外，同时还有显示元素的意思 <style> .Chinese { display: none; /* display: blo
复制链接

扫一扫