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: 不管超出内容否,一直显示滚动条

相关推荐
FanetheDivine6 分钟前
正确使用flex-1
css·html
梅子酱~7 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
s_little_monster11 分钟前
【Linux】进程信号的捕捉处理
linux·运维·服务器·经验分享·笔记·学习·学习方法
JackmoodCC36 分钟前
Java学习总结-递归-递归寻找文件绝对路径
学习
守护者1701 小时前
JAVA学习-练习试用Java实现“实现一个Hadoop程序,使用Hive进行复杂查询和数据筛查”
java·学习
吴梓穆1 小时前
UE5学习笔记 FPS游戏制作35 使用.csv配置文件
笔记·学习·ue5
虾球xz1 小时前
游戏引擎学习第199天
学习·游戏引擎
A林玖2 小时前
【计算机相关学习】R语言
开发语言·学习·r语言
浪淘沙jkp2 小时前
大模型学习三:DeepSeek R1蒸馏模型组ollama调用流程
学习·ollama·deepseek
nuo5342023 小时前
黑马 C++ 学习笔记
c语言·c++·笔记·学习