CSS 之 display visibility overflow三属性用于隐藏元素的区别

最新推荐文章于 2021-06-09 23:49:56 发布

鸭绒

最新推荐文章于 2021-06-09 23:49:56 发布

阅读量274

点赞数

分类专栏：布局效果文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_43334673/article/details/107244477

版权

布局效果专栏收录该内容

29 篇文章 5 订阅

订阅专栏

文章目录

1. display

该属性有很多属性值，我们这里只学两个：

属性值	描述
none	隐藏对象
block	显示对象或者转换为块级元素

看下面代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>显示隐藏元素</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      .pig {
        display: none;
        width: 200px;
        height: 200px;
        background-color: aqua;
      }
      .dog {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="pig"></div>
    <div class="dog"></div>
  </body>
</html>

在给第一个容器添加了display:none之后效果图：

在这里插入图片描述
正如所看到的，第一个容器的位置不被保留，而是被第二个容器使用了。

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

2. visibility

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

属性值	描述
visible	显示元素
hidden	隐藏元素

看下面代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>显示隐藏元素</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      .pig {
        visibility: hidden;
        width: 200px;
        height: 200px;
        background-color: aqua;
      }
      .dog {
        width: 100px;
        height: 100px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="pig"></div>
    <div class="dog"></div>
  </body>
</html>

给第一个容器设置visibility:hidden的效果图：
在这里插入图片描述
小结：visibility隐藏元素后，继续占有原来的位置。

3. overflow

overflow属性用于指定如果内容超出了一个容器所能承载的量时会发生什么？

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

看下面代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>显示隐藏元素</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      .pig {
        width: 200px;
        height: 200px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div class="pig">
      一、没遇见你之前，我，随遇而安，遇见你之后，我，以你为安。
      二、你是我今生渡不过的劫，多看一眼就心软，拥抱一下就沦陷！
      三、提笔想念的人是你，夜深面前的人是你，岁月纷扰回忆是你，前路漫漫所爱是你。
      四、没遇到你之前，我没想过结婚，遇见你之后，结婚这事我没想过和别人。
      五、错过了青梅竹马，避开了情窦初开，到如今人生的意义，就只剩下和你两鬓斑白。
    </div>
  </body>
</html>

在没添加overflow时效果：
在这里插入图片描述
添加overflow:hidden后

小结：overflow：hidden只是隐藏超出盒子的部分内容，而不是整个盒子都隐藏起来。

4.区别

区别点在于：1.隐藏元素后是否保留原来位置 2.全部隐藏还是部分隐藏

如果隐藏元素想要原来的位置，就用visibility:hidden(完全隐藏)
如果隐藏元素不想要原来位置，就用display:none(完全隐藏)
如果只想把超出的部分内容隐藏，就用overflow属性。

鸭绒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 之 display visibility overflow三属性用于隐藏元素的区别

文章目录1. display2. visibility3. overflow4.区别1. display该属性有很多属性值，我们这里只学两个：属性值描述none隐藏对象block显示对象或者转换为块级元素看下面代码：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" co
复制链接

扫一扫

专栏目录