一、写在前面
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>Documenttitle>
<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>Documenttitle>
<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>Documenttitle>
<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，但是任然占据空间，无法交互。
提供CDN加速