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

乌鸦不像写字台2024-09-07 9:28

元素的显示与隐藏

前言
一、display显示
二、visibility可见性
三、overflow溢出

前言

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