HTML元素的隐藏四种方法

最新推荐文章于 2025-03-10 21:37:25 发布

原创最新推荐文章于 2025-03-10 21:37:25 发布 · 1.2w 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#html #css3 #前端

本文介绍了HTML元素隐藏的四种方法：通过display属性设置为none，使元素完全消失且不占空间；使用visibility属性设置为hidden，元素不可见但保留空间；利用rgba颜色将透明度设为0，不影响子元素；以及通过opacity属性设置透明度为0，影响所有子元素。

HTML元素的隐藏四种方法

一、方法一：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>Document</title>
  <style>
    .box {
      display: none;
    }
  </style>
</head>

<body>
  <div class="box">我是box盒子</div>
</body>

</html>

设置之后是不占空间的，就不存在一样效果如下

<!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>Document</title>
  <style>
    .box {
      display: none;
    }
  </style>
</head>

<body>
  <div class="box">我是box盒子</div>
  <p>哈哈哈哈</p>
</body>

</html>

二、方式二：visibility设置为hidden

设置为hidden，虽然元素不可见，但它还是会占据元素相应的空间
默认为visible，可见

<!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>Document</title>
  <style>
    .box {
      display: none;
    }

    .content {
      visibility: hidden;
    }
  </style>
</head>

<body>
  <div class="box">我是box盒子</div>
  <p>哈哈哈哈</p>

  <div class="content">我是content</div>
  <div>呵呵呵</div>
</body>

</html>

三、rgba设置颜色，将a设置为0

rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素，只是把透明度降低，元素位置还是存在的

<!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>Document</title>
  <style>
    .box {
      color: rgba(0, 0, 0, 0);
    }

    .content {}
  </style>
</head>

<body>
  <div class="box">我是box盒子</div>
  <p>哈哈哈哈</p>

  <div class="content">我是content</div>
  <div>呵呵呵</div>
</body>

</html>

四、opacity设置为0

设置整个元素的透明度，会影响所有子元素，只是把透明度降低，元素位置还是存在的

<!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>Document</title>
  <style>
    .box {
      color: rgba(0, 0, 0, 0);
    }

    .content {
      opacity: 0.5;
    }
  </style>
</head>

<body>
  <div class="box">我是box盒子</div>
  <p>哈哈哈哈</p>

  <div class="content">我是content
    <img src="./images/diqiu.jpg" alt="">
  </div>
  <div>呵呵呵</div>
</body>

</html>