CSS学习15--元素的显示与隐藏

元素的显示与隐藏

前言

CCS中有三个显示和隐藏的单词比较常见,分别是display visibility和overflow。

他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。最常见的是网站广告。

一、display显示

display设置或者检索对象是否以及如何显示。使用更多!

display: none; 隐藏对象,与它相反的是display: block; 除了转换为块级元素还有显示元素的意思。

特点:隐藏之后不保留位置。

二、visibility可见性

设置或检索是否显示对象。

visible: 对象可见

hidden: 对象隐藏

特点:隐藏之后,保留原有位置。

例一:鼠标经过显示二维码

html 复制代码
<html>
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            text-align: center;
            line-height: 50px;    
        }
        div:first-child {
            display: none;
            /*隐藏元素,看不见但是存在代码
            但不保留位置*/
            display: block;
            visibility: hidden;
            /*隐藏元素,与display:none最大的区别是它保留位置*/
            visibility: visible;
            position: relative;
        }
        div:last-child {
            background-color: purple;
        }
        div img {
            position: absolute;
            left: 100px;
            top: 0;
            display: none; /*隐藏二维码*/
        }
        div:hover img{
            display: block; /*显示元素*/
        }
    </style>
</head>
<body>
    <div>扫二维码
        <img src="#.png" alt="wu">
    </div>
    <div></div>
</body>
</html>

例二:下拉菜单

html 复制代码
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: relative;
        }
        div ul {
            position: absolute;
            left: 0;
            top: 0;
            display: none; /*隐藏元素*/
        }
        div:hover ul{
            display: block; /*显示元素*/
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div>here
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
</html>

三、overflow溢出

设置或检索当对象内容超过其指定高度及宽度时如何管理内容。

visible: 不剪切内容也不添加滚动条

auto: 超出自动显示滚动条,不超出不显示

hidden: 不超出显示对象尺寸的内容,溢出隐藏//新闻标题

scroll: 不管超出内容否,一直显示滚动条

相关推荐
豆沙沙包?2 小时前
8.学习笔记-Maven进阶(P82-P89)
笔记·学习·maven
醉暮天3 小时前
4.25学习——文件上传之00截断
学习
blackA_6 小时前
数据库MySQL学习——day4(更多查询操作与更新数据)
数据库·学习·mysql
梁下轻语的秋缘8 小时前
每日c/c++题 备战蓝桥杯(P1049 [NOIP 2001 普及组] 装箱问题)
c语言·c++·学习·蓝桥杯
球求了9 小时前
C++:继承机制详解
开发语言·c++·学习
时光追逐者9 小时前
MongoDB从入门到实战之MongoDB快速入门(附带学习路线图)
数据库·学习·mongodb
一弓虽9 小时前
SpringBoot 学习
java·spring boot·后端·学习
genggeng不会代码11 小时前
用于协同显著目标检测的小组协作学习 2021 GCoNet(总结)
学习
我爱吃朱肉11 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3
搞机小能手11 小时前
六个能够白嫖学习资料的网站
笔记·学习·分类