0
点赞
收藏
分享

微信扫一扫

元素的显示与隐藏

小飞侠熙熙 2022-03-24 阅读 172

文章目录


前言

类似网站广告,当我们点击关闭就不见了,但是重新刷新页面,会重新出现!

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


一、display显示隐藏

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

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

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

后面应用及其广泛,搭配js可以做很多的网页特效

二、visibility可见性

visibility属性用于指定一个元素应可见还是隐藏。

  1. visibility:visible;元素可视
  2. visibility:hidden;元素隐藏

visibility隐藏元素后,继续占有原来的位置。

如果隐藏元素想要原来的位置,就用visibility:hidden;

如果隐藏元素不想要原来的位置,就使用display:none;(用处更多)

三、overflow溢出

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

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

一般情况下,都不想让溢出的内容显示出来,因为溢出的部分会影响布局。

但是如果有定位的盒子,慎用overflow:hidden 因为它会隐藏多余的部分

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

  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>Document</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;
        }
    </style>
</head>

<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/tudou.jpg" alt="">
    </div>
</body>


效果图:

在这里插入图片描述


总结

  1. display 显示隐藏元素,但是不保留位置
  2. visibility显示隐藏元素,但是保留原来的位置
  3. overflow溢出显示隐藏,但是只是对于溢出的部分处理
举报

相关推荐

0 条评论