首页 > 其他分享> 文章详细

元素的显示与隐藏

2021-10-10 16:00:44 阅读：118 来源： 互联网

标签：遮罩显示元素 visibility display 隐藏

文章目录

前言
一、display显示隐藏（重要）
二、visibility显示隐藏
三、overflow溢出显示隐藏
总结
综合案例

前言

类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现!
本质:让一个元素在页面中隐藏或者显示出来

一、display显示隐藏（重要）

display属性用于设置一个元素应如何显示。

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

display隐藏元素后,不再占有原来的位置。
后面应用及其广泛,搭配JS可以做很多的网页特效。

二、visibility显示隐藏

visibility属性用于指定一个元素应可见还是隐藏
visibility: visible;元素可视
visibility: hidden;元素隐藏
visibility隐藏元素后,继续占有原来的位置。
如果隐藏元素想要原来位置,就用visibility: hidden
如果隐藏元素不想要原来位置,就用 display:none(用处更多重点）

三、overflow溢出显示隐藏

overflow属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度)时,会发生什么。

属性值	描述
visible	不剪切内容也不添加滚动条
hidden	不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll	不管超出内容否,总是显示滚动条
auto	超出自动显示滚动条,不超出不显示滚动条

一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响布局。
但是如果有定位的盒子,请慎用 overflow: hidden因为它会隐藏多余的部分

总结

display显示隐藏元素但是不保留位置
visibility显示隐藏元素但是保留原来的位置
overflow溢出显示隐藏但是只是对于溢岀的部分处理

综合案例

案例:土豆网鼠标经过显示遮罩

练习思考

1.练习元素的显示与隐藏
2.练习元素的定位

核心原理:原先半透明的黑色遮罩看不见,鼠标经过大盒子,就显示出来
遮罩的盒子不占有位置,就需要用绝对定位和 display配合使用。

代码

<!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>
        .tudou {
            position: relative;
            width: 448px;
            height: 320px;
            margin: 30px auto;
            background-color: pink;
        }

        .tudou img {
            width: 100%;
            height: 100%;
        }

        .mask {
            /* 隐藏遮罩层 */
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 注意背景图加入 */
            background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;
        }

        /* 当鼠标经过 土豆这个盒子 让里面遮罩层显示出来 */
        .tudou:hover .mask {
            /* 显示元素*/
            display: block;

        }
    </style>
</head>

<body>
    <div class="tudou">
        <!-- 注意加一个mask盒子 -->
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <!-- 注意加一个mask盒子 -->
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <!-- 注意加一个mask盒子 -->
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
    <div class="tudou">
        <!-- 注意加一个mask盒子 -->
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>

</html>

展示

在这里插入图片描述

标签：遮罩,显示,元素,visibility,display,隐藏
来源： https://blog.csdn.net/qq_45765588/article/details/120686282

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9