CSS元素的显示与隐藏：display 属性， visibility 属性， overflow 溢出

最新推荐文章于 2024-04-17 01:51:34 发布

奶盖不加糖

最新推荐文章于 2024-04-17 01:51:34 发布

阅读量810

点赞数 1

文章标签： css3 html html5

本文链接：https://blog.csdn.net/qq_44156869/article/details/111035544

版权

CSS 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

文章目录

元素的显示与隐藏

目的：
让一个元素在页面中消失或者显示出来。

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

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

display 属性

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

display:none ;隐藏对象。
display:block ；除了转换为块级元素之外，同时还有显示元素的意思。

display:none 隐藏对象案例：

   <style>
       .damao {
           /*隐藏元素 damao*/
           display: none;
           /* 先隐藏元素 ， 不保留位置 */
           width: 200px;
           height: 200px;
           background-color: pink;
       }
       .ermao {
           width: 250px;
           height: 250px;
           background-color: blue;
       }
   </style>
</head>
<body>
   <div class="damao"></div>
   <div class="ermao"></div>
</body>

在这里插入图片描述
display:block显示元素案例：

<head>
   <style>
       .damao {
           /*隐藏元素 damao*/
           /* display: none; */
           /* 先隐藏元素 ， 不保留位置 */
           display: block;
           /*这里除了转换为块级元素以外，还可以显示元素*/
           width: 200px;
           height: 200px;
           background-color: pink;
       }
       .ermao {
           width: 250px;
           height: 250px;
           background-color: blue;
       }
   </style>
</head>
<body>
   <div class="damao"></div>
   <div class="ermao"></div>
</body>

在这里插入图片描述

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

实际开发场景：配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下来菜单，应用极为广泛。

visibility 属性

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

visibility ： visible ;元素可见
visibility : hidden;元素隐藏

案例：

 <head>
       <style>
           .damao {
               /*1.hidden 隐藏元素*/
               /*2.保留位子*/
               /* visibility: hidden; */
               /*元素可视*/
               visibility: visible;
               width: 200px;
               height: 200px;
               background-color: pink;
           }
           .ermao {
               width: 250px;
               height: 250px;
               background-color: blue;
           }
       </style>
    </head>
    <body>
       <div class="damao"></div>
       <div class="ermao"></div>
    </body>

在这里插入图片描述

特点： visibilty 隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置，就用
visibility : hidden。
如果隐藏元素不想要原来位置，就用
display : none 。

overflow 溢出

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

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

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

案例：

<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>Document</title>
    <style>
        div {
            /*overflow: hidden;*/
            /*溢出隐藏---超出盒子大小的部分，隐藏起来*/
            /*overflow: hidden;*/

            /*overflow: scroll;*/
            /*滚动条总是会显示，不会超出盒子的大小，内容能完全显示但是太丑了，我们不常用*/   
            overflow: auto;
            /*如果超出就显示滚动条，如果不超出就不显示滚动条，还是不常用*/
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
        你微笑地看着我<br/>
        不说一句话<br/>
        而我知道<br/>
        为了这个<br/>
        我已经等了很久了<br/>
    </div>
</body>

在这里插入图片描述

一般情况下，我们都不想溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请谨慎用 overflow : hidden 因为它会隐藏多余的部分。

实际开发场景：

清除浮动。
隐藏超出内容，隐藏掉，不允许内容超过父盒子。

显示与隐藏总结

属性	区别	用途
display	隐藏对象，不保留位置	配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛
visiblity	隐藏对象，保留位置	使用比较少
overflow	只是隐藏超出大小的部分	可以清除浮动，保证盒子里面的内容不会超出盒子范围

综合案例：

<head>
    <style>
       
        .tudou {
            position: relative;
            width: 250px;
            height: 200px;
            margin: 100px auto;
        }

        /* 1.原来盒子里面装有一个黑色半透明的盒子，刚开始是看不见的隐藏 */
        .mask {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 200px;
            background: rgba(0, 0, 0, .3) url(images/arr.png) no-repeat center center;
        }
        /* 2.当我们鼠标经过的时候，a 里面这个黑色半透明的盒子就显示出了。 */
        .tudou a:hover .mask {
            display: block;
        }

    </style>
</head>

<body>
    <div class="tudou">
        <a href="#">
            <div class="mask"></div>
            <img src="images/tudou.jpg" alt="">
        </a>
    </div>
</body>

在这里插入图片描述

奶盖不加糖

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS元素的显示与隐藏：display 属性， visibility 属性， overflow 溢出

元素的显示与隐藏类似网站的广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现。本质：让一个元素在页面中隐藏或者显示出来。display 显示隐藏visibility 显示隐藏overflow 溢出显示隐藏display 属性display 属性用于设置一个元素应如何显示。display:none ;隐藏对象display:block ；除了转换为块级元素之外，同时还有显示元素的意思。display 隐藏元素后，不再占有原来的位置。后面应用及其广泛，搭配JS可以做很多的
复制链接

扫一扫