前端基础：CSS元素的显示与隐藏

曹莓奶昔

已于 2022-03-23 21:34:31 修改

阅读量2.2k

点赞数 1

分类专栏： CSS 文章标签：前端 html css html5 css3

于 2022-03-23 15:18:43 首次发布

本文链接：https://blog.csdn.net/weixin_49555741/article/details/123674700

版权

CSS 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

1. 元素的显示与隐藏

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

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

1.1 display 显示隐藏

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

display：none；隐藏对象
display：block；除了转换块级元素外，同时还显示元素

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

后面应用广泛，搭配JS做网页特效

1.2 visibility 可见性

visibility：visible；元素可视
visibility：hidden；元素隐藏

visibility隐藏元素后，占有原先的位置

与display隐藏区别：display不占位置，visibility占有原先位置，display：none（用的更多）

1.3 overflow 溢出

overflow属性指定了如果内容溢出一格元素的框（超过了指定高度以宽度）时发生的

属性值	描述
visible	不剪切内容也不加滚动条
hidden	不显示超出尺寸内容，超出部分隐藏
scroll	不超出内容，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

实际中，不让溢出的部分显示，这样会影响页面的布局
但如果是有定位的盒子，要用overflow：hidden隐藏起来，因为它们是多余的

2. 土豆网案例

2.1 案例分析

为了练习元素显示与隐藏和元素的定位

案例：土豆网鼠标经过显示遮盖

核心原理：原先半透明的盒子遮盖了，当鼠标经过时显示

遮盖的盒子不占位置，使用绝对定位和display搭配使用

2.2 效果图

2.3 代码

<!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: 1280px;
            height: 719px;
            background-color: pink;
            margin:30px auto;

        }
        .tudou img {
            height: 100%;
        }
        .mask {
            /* 隐藏遮盖层 */
            display: none;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4) url(images/rad.PNG) no-repeat center;
        }
        /* 当鼠标经过显示盒子，里面的盒子显示出来 */
        .tudou:hover .mask {
            display: block;
            /* 显示块级元素 */
        }
    </style>
</head>
<body>
    
    <div class="tudou">
        <div class="mask"></div>
        <img src="images/1.jpg">
    </div>
</body>
</html>

曹莓奶昔

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
前端基础：CSS元素的显示与隐藏

1. 元素的显示与隐藏类似网站广告，当我们点击关闭就不见，但是我们重新刷新页面，就会重新出现本质：让一个元素在页面中隐藏或者显示出来1.1display 显示隐藏display属性用于设置一个元素如何显示display：none；隐藏对象 display：block；除了转换块级元素外，同时还显示元素1.2 visibility 显示隐藏1.3 overflow 溢出显示隐藏...
复制链接

扫一扫

专栏目录