CSS基础「六」元素的显示与隐藏

最新推荐文章于 2023-05-04 00:20:41 发布

imByte

最新推荐文章于 2023-05-04 00:20:41 发布

阅读量221

点赞数

分类专栏： HTML+CSS 文章标签： css 定位

本文链接：https://blog.csdn.net/qq_46331050/article/details/119820198

版权

HTML+CSS 专栏收录该内容

15 篇文章 19 订阅

订阅专栏

本篇文章为 CSS 基础系列笔记第六篇，参考黑马程序员pink老师前端入门教程

其他CSS基础相关文章：

CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表

CSS基础「二」复合选择器 / 元素显示模式 / 背景 / 三大特性

CSS基础「三」盒子模型/产品模块案例/圆角边框/盒子阴影/文字阴影

CSS基础「四」浮动 \ 常见网页布局

CSS基础「五」定位

CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化

元素的显示与隐藏

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

display 显示隐藏
visibility 显示隐藏
overflow 溢出显示隐藏

1. display 属性

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

display:none;：隐藏对象
display:block;：除了转换块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置

示例
在这里插入图片描述

此属性在后面应用及其广泛，搭配 JS 可以做很多的网页特效

2. visibility 可见性

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

visibility: visible;：元素可视
visibility: hidden;：元素隐藏
visibility 隐藏元素后，继续占有原来的位置

示例
在这里插入图片描述

如果隐藏元素且想要原来的位置，就用 visibility: hidden;
如果隐藏元素且不想要原来的位置，就用 display: none; （用处更多重点）

3. overflow 溢出

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

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

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

在这里插入图片描述

4. 综合案例

案例：鼠标经过显示遮罩
在这里插入图片描述

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

核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子就显示出来。遮罩的盒子不占有位置，就需要用绝对定位和 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: 444px;
            height: 320px;
            background-color: tomato;
            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>

</html>

.tudou:hover .mask ：鼠标经过 .tudou 盒子，让 .mask 遮罩层显示

欢迎阅读下篇文章： CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化

imByte

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础「六」元素的显示与隐藏

文章目录1. 元素的显示与隐藏本质：让一个元素在页面中隐藏或者显示出来1.1 display 属性 ☆☆1.2 visibility 可见性1.3 overflow 溢出2. 综合案例案例：鼠标经过显示遮罩1. 元素的显示与隐藏类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！本质：让一个元素在页面中隐藏或者显示出来display 显示隐藏visibility 显示隐藏overflow 溢出显示隐藏1.1 display 属性 ☆☆display 属性用于
复制链接

扫一扫