从头学前端-34：显示与隐藏

最新推荐文章于 2022-10-03 10:13:51 发布

一碗周.

最新推荐文章于 2022-10-03 10:13:51 发布

阅读量481

点赞数 2

分类专栏：从头学前端文章标签：前端 css css3

本文链接：https://blog.csdn.net/weixin_46163658/article/details/121820453

版权

从头学前端专栏收录该内容

55 篇文章 21 订阅

订阅专栏

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第三十四篇-《显示与隐藏》

写在前面

本篇文章介绍CSS中的显示与隐藏，主要包括两个内容，一个是display属性的none属性值，另一个就是visibility属性。

display属性

CSS中提供的display属性用来设置HTML元素的显示类型，该属性有一个特殊的值，该值就是none。如果为某个元素设置该值，该元素将不会在页面中显示，且不占用任何空间。还有就是其子元素也会被隐藏。

值得注意的是如果是正常的文档流的话，该元素隐藏之后会影响后面元素显示的。

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<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>display属性</title>
  <style>
    body {
      margin: 0;
    }

    .box {
      box-sizing: border-box;
      height: 400px;
      width: 400px;
      background-color: lightcoral;
      border: 1px solid #000;
      margin: 0 auto;
      /* 文字设置 */
    }

    /* 凡是带有 hidden 的 class 元素都将不会进行显示 */
    .hidden {
      display: none;
    }
  </style>
</head>

<body>
  <div class="box hidden">1</div>
  <div class="box">2</div>
</body>

</html>

运行代码如下所示：

01_display属性.png

:hover伪类配合display: none可以完成很多悬停显示的案例，例如鼠标悬停展示二维码，代码如下：

<!DOCTYPE html>
<html lang="en">

<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>鼠标悬停展示二维码</title>
  <!-- 引入一个花里胡哨的按钮 -->
  <link rel="stylesheet"
        href="./button.css">
  <style>
    .qr-code {
      width: 200px;
      height: 200px;
      line-height: 200px;
      background-color: gray;
      text-align: center;
      font-size: 64px;
      margin-left: 140px;
      /* 默认隐藏 */
      display: none;
    }

    .btn:hover~.qr-code {
      display: block;
    }
  </style>
</head>

<body>
  <button class="btn">
    ⛱️ 悬停展示二维码
  </button>
  <div class="qr-code">
    二维码
  </div>
</body>

</html>

运行效果如下所示：

02_悬停展示二维码.gif

上面就是关于display: none的一个实际用途，当前它的实际用处绝对不止这么一种。

visibility属性

CSS的visibility属性用来设置HTML元素显示或者隐藏，而不更改HTML页面的布局；也就是说visibility属性仅仅有隐藏元素的效果，并不会改变页面的布局.该属性还可以隐藏<table>表格中的行或列。

该属性常用的值就两个一个是默认值visible显示元素，另一个是hidden隐藏元素

示例代码如下所示：

<!DOCTYPE html>
<html lang="en">

<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>visibility属性</title>
  <style>
    div {
      width: 200px;
      height: 200px;
    }

    .box1 {
      background-color: red;
      /* 
          设置 visibility 属性为 hidden 时，该元素在隐藏，但是在HTML页面中所占区域依然存在。
          此属性默认值为(visible) 
          */
      visibility: hidden;
    }

    .box2 {
      background-color: blueviolet;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

</html>

代码执行效果如下：

03_visibility属性.png

opacity属性

除了前面介绍的两个隐藏元素的方法，CSS中提供的opacity属性也可以实现元素隐藏的效果。

opacity属性实际上是用来设置元素的透明度，接受一个0~1的值，当元素的值不为1时，会将元素放在一个新的层叠上下文中。

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<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>opacity属性</title>
  <style>
    div {
      width: 200px;
      height: 200px;
    }

    .box1 {
      background-color: red;

      /* 将元素设置为完全透明 */
      opacity: 0;
    }

    .box2 {
      background-color: blueviolet;
    }
  </style>
</head>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
</body>

</html>

效果与上面的那张图是一样的。

{完}

写在最后

你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏 - 掘金 (juejin.cn)进入之后给个关注。

最后也可以给我点个关注，万分荣庆。

往期推荐

关于v-model语法糖的知识点，这次应该说全了

一碗周.

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
3
评论
从头学前端-34：显示与隐藏

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~这是【从头学前端】系列文章的第三十四篇-《显示与隐藏》本系列文章在掘金首发，编写不易转载请获得允许写在前面本篇文章介绍CSS中的显示与隐藏，主要包括两个内容，一个是display属性的none属性值，另一个就是visibility属性。display属性CSS中提供的display属性用来设置HTML元素的显示类型，该属性有一个特殊的值，该值就是none。如果为某个元素设置该值，该元素将不会在页面.
复制链接

扫一扫