从前端小白到大佬元素的显示与隐藏

最新推荐文章于 2023-06-02 20:32:28 发布

一只琳娜

最新推荐文章于 2023-06-02 20:32:28 发布

阅读量210

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/my_prince/article/details/108564792

版权

css元素的显示与隐藏

类似于网站广告，当我们点击关闭就不见了，但是我们重新刷新页面后，会重新出现！
本质：让一个元素在页面中隐藏或显现。
1.display 显示隐藏
-display:none 隐藏，脱标
-display：block 显示或转换块级元素

2.visibility 显示隐藏
-visibility：visible 可视
-visibility：hidden 隐藏，不脱标

3. 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>
        .box {
            position: relative;
            width: 444px;
            height: 320px;
            margin: 100px auto;
            background-color: aquamarine;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        .box .yincang {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) url(imgs/arr.png) no-repeat center;
        }
        /* 鼠标经过box，box里面的隐藏层yincang显示出来 */
        
        .box:hover .yincang {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="imgs/pic.png">
        <div class="yincang"> </div>
    </div>


</body>

</html>

效果：
1 在这里插入图片描述
2鼠标经过时

一只琳娜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从前端小白到大佬元素的显示与隐藏

css元素的显示与隐藏类似于网站广告，当我们点击关闭就不见了，但是我们重新刷新页面后，会重新出现！本质：让一个元素在页面中隐藏或显现。1.display 显示隐藏-display:none 隐藏，脱标-display：block 显示或转换块级元素2.visibility 显示隐藏-visibility：visible 可视-visibility：hidden 隐藏，不脱标3. overflow 溢出显示隐藏只对溢出的部分内容隐藏或者显示-overflow：visible；可视-ov
复制链接

扫一扫