一、写在前面
css存在哪些方式可以隐藏页面的元素的方法，下面将对其进行总结。
二、总结方法
2.1、opacity:0

<style>
    .first {
      visibility: hidden;
    }

    .last {}
  </style>
<body>

  <div>
    <h1 class="first">我是第一行</h1>
    <h1 class="last">我是第二行</h1>
  </div>

  <script>
    let first = document.querySelector('.first')
    let last = document.querySelector('.last')

    first.addEventListener('click', () => {
      console.log('first')
    })

    last.addEventListener('click', () => {
      console.log('last')
    })
  </script>

</body>

opacity: 0:将元素的透明度设置为0，就看起来隐藏了，但是任然可以占据空间且可以交互。
2.2、visibility: hidden

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

<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>
    .first {
      visibility: hidden;
    }

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

<body>

  <div>
    <h1 class="first">我是第一行</h1>
    <h1 class="last">我是第二行</h1>
  </div>

  <script>
    let first = document.querySelector('.first')
    let last = document.querySelector('.last')

    first.addEventListener('click', () => {
      console.log('first')
    })

    last.addEventListener('click', () => {
      console.log('last')
    })
  </script>

</body>

</html>

visibility:hidden和opacity:0一样仍然占据空间，但是看不多，并且无法进行交互。
2.3、overflow:hidden

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

<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>
    .main {}

    .main .box {
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      overflow: hidden;
    }
  </style>
</head>

<body>

  <div class="main">
    <div class="box">
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
      哈哈哈哈哈哈
    </div>
    <h1>大家好</h1>
  </div>

</body>

</html>

overflow：hidden，只隐藏溢出部分，并且不占据空间，也无法交互。
2.4、display:none
这个比较熟悉，从文档流中去除，不占据空间同时也无法交互。
2.5、z-index: -999

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

<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>
    * {
      margin: 0px;
      padding: 0px;
    }

    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      position: absolute;
      z-index: -999;
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }
  </style>
</head>

<body>

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

</body>

</html>

z-index:-999理是将层级放到底部，这样就被覆盖了，看起来隐藏了
2.6、transform: scale(0,0)

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

<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>
    .box1 {
      width: 200px;
      height: 200px;
      background-color: red;
      transform: scale(0, 0);
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: green;
    }
  </style>
</head>

<body>

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

  <script>
    let box1 = document.querySelector('.box1')
    let box2 = document.querySelector('.box2')
    box1.addEventListener('click', () => {
      console.log('box1')
    })
    box2.addEventListener('click', () => {
      console.log('box2')
    })
  </script>
</body>

</html>

transform: scale(0,0) :进行平面缩放，将大小缩小为0，但是任然占据空间，无法交互。

有哪些⽅式（CSS）可以隐藏⻚⾯元素？

相关文章

热门标签

最新文章