前端基础(十四)_隐藏元素的方法

news2025/2/24 3:13:16

隐藏元素的方法

1、display

通过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>
  <style>
    .box1 {
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: yellow;
    }
  </style>
</head>

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

</html>

在这里插入图片描述
使用：

  <style>
    .box1 {
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: yellow;
      display: none;
    }
  </style>

在这里插入图片描述
当我们把display设置为block的时候可以再次显示：

2、visibility

通过visibility: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>我的第一个页面</title>
  <style>
    .box1 {
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox111 {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: yellow;
    }

    .smallBox222 {
      border: 1px solid red;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="smallBox111">
      我是smallBox盒子111
    </div>
    <div class="smallBox222">
      我是smallBox盒子222
    </div>

  </div>
</body>

</html>

在这里插入图片描述
使用：

  <style>
    .box1 {
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox111 {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: yellow;
      visibility: hidden;
    }

    .smallBox222 {
      border: 1px solid red;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: pink;
    }
  </style>

在这里插入图片描述
能够发现这个元素已经不存在了在市占用的文档流位置还是存在的。
当我们把visibility设置为visible的时候可以再次显示：

3、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>我的第一个页面</title>
  <style>
    .box1 {
      width: 500px;
      height: 150px;
      border: 1px solid red;
    }

    .smallBox111 {
      border: 1px solid blue;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: yellow;
      opacity: 0;
    }

    .smallBox222 {
      border: 1px solid red;
      padding: 5px;
      width: 50%;
      height: 40px;
      font-weight: bold;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="box1">
    <div class="smallBox111">
      我是smallBox盒子111
    </div>
    <div class="smallBox222">
      我是smallBox盒子222
    </div>

  </div>
</body>

</html>

在这里插入图片描述
也是依然占位当我们设置为1的时候可以显示

4、其他

4.1、设置元素位置，让其消失
position：absolute top:0 left：-100
4.2、overflow属性实现，将要隐藏元素移出父元素的范围
4.3、filter属性-- filter:Alpha(opacity=x)
兼容性：仅支持IE6、7、8、9，在IE10及以上版本中被移除
取值范围 0(完全透明)<x<100(完全不透明)
4.4、rgba(r,g,b,a)—用于颜色的不透明度设置
兼容性：IE6\7\8\不支持，IE9及更早版本的浏览器都支持
Red green blue 0-255
Alpha 0-1