• 有问题请联系QQ:2374146085
  • 有问题请联系QQ:2374146085

元素的显示与隐藏

1年前 (2021-08-27) 976次浏览 已收录 0个评论

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

  • display 显示隐藏
  • visibility 显示隐藏
  • overflow 溢出显示隐藏

display 属性

  • none 隐藏对象
  • block 除了转换为块级元素之外,同时还有显示元素的意思

display 隐藏元素后,不再占有原来的位置


visibility

隐藏后继续占有原来位置


如果有定位的盒子,慎用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>元素显示与隐藏</title>
    <style>

        .cc{
            background-color: red;
            width: 200px;
            height: 100px;
        }
        /* 不显示超出尺寸的内容 */
        .hid{
            margin-top: 100px;
            overflow: hidden;
            background-color: blue;
            width: 200px;
            height: 100px;
        }
        /* 总是显示滚动条 */
        .sc{
            overflow: scroll;
            background-color: green;
            width: 200px;
            height: 100px;
        }
        /* 在超出尺寸后才显示滚动条 */
        .au{
            overflow: auto;
            background-color: yellow;
            width: 200px;
            height: 100px;
        }
        

    </style>
</head>
<body>
    <div class="cc">
        哦;阿上飞机哦屁啊文件s警匪片饿啊警方破阿额外积分啊喂警方破了阿尔减肥了;‘oases就佛i怕受过哈是豆腐干哈饿我;哦公司的分公司担任过生日的各色的人格是热的给
    </div>
    <div class="hid">
        哦;阿上飞机哦屁啊文件s警匪片饿啊警方破阿额外积分啊喂警方破了阿尔减肥了;‘oases就佛i怕受过哈是豆腐干哈饿我;哦公司的分公司担任过生日的各色的人格是热的给
    </div>
    <div class="sc">
        哦;阿上飞机哦屁啊文件s警匪片饿啊警方破阿额外积分啊喂警方破了阿尔减肥了;‘oases就佛i怕受过哈是豆腐干哈饿我;哦公司的分公司担任过生日的各色的人格是热的给
    </div>
    <div class="au">
        哦;阿上飞机哦屁啊文件s警匪片饿啊警方破阿额外积分啊喂警方破了阿尔减肥了;‘oases就佛i怕受过哈是豆腐干哈饿我;哦公司的分公司担任过生日的各色的人格是热的给
    </div>
</body>
</html>
结果演示

综合案例

<!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>综合案例</title>
    <style>
        .box{
            position: relative;
            width: 400px;
            height: 200px;
        }
        img{         
            width: 100%;
            height: 100%;
        }
        .mask{
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .mask:hover{       
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="mask"></div>
            <img src="images/tudou.jpg">
    </div>
</body>
</html>
结果演示
渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:元素的显示与隐藏
喜欢 (0)

您必须 登录 才能发表评论!