HTML5+CSS3 学习笔记 12

最新推荐文章于 2024-08-19 15:26:51 发布

A_bad_horse

最新推荐文章于 2024-08-19 15:26:51 发布

阅读量211

点赞数 1

分类专栏： HTML5+CSS3 文章标签： html5 css3

本文链接：https://blog.csdn.net/A_bad_horse/article/details/105299275

版权

HTML5+CSS3 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

视频资源：https://www.bilibili.com/video/BV14J4114768?from=search&seid=3842566320098741425

视频记录 245-249

元素的显示与隐藏

第一种：display:设置一个元素应如何显示
- display: none; 隐藏对象
- display: block; 除了转换为块级元素之外，同时还有显示元素的意思。
- display隐藏元素后，不再占有原来的位置。
第二种：visiblity
- visiblity: visible; 元素可见
- visiblity: hidden; 元素隐藏
- visiblity隐藏后，继续占有原来的位置。
第三种：overflow 溢出
- overflow: visible;
- overflow: hidden
- overflow: scroll; 溢出的部分显示滚动条，不溢出也显示滚动条。
- overflow: auto; 溢出时显示滚动条，不溢出不显示滚动条。
- 一般情况不让隐藏内容显示出来，溢出部分会影响布局。
- 但是如果有定位的盒子，请慎用overflow:hidden，会影响多余的部分。

土豆网小练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿土豆网显示隐藏元素案例</title>
    <style>
        .tudou {
            position: relative; /*子绝父相*/
            width: 444px;
            height: 320px;
            background-color: pink;
            margin: 30px auto;
        }
        .tudou img {
            width: 100%; /*始终与父亲保持一样大*/
            height: 100%; /*始终与父亲保持一样大*/
        }
        .mask {
            display: none; /*隐藏遮罩层*/
            position: absolute; /*绝对定位，不占位置*/
            top: 0;
            left: 0;
            width: 100%; /*始终与父亲保持一样大*/
            height: 100%; /*始终与父亲保持一样大*/
            background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center; /*黑色半透明*/
        }
        /* 鼠标经过盒子时，里面的显示遮罩层 */
        .tudou:hover .mask {
            display: block; /*block是指显示元素*/
        }
    </style>
</head>
<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>
</html>