display: none
- 这是我们开发过程中使用到的最多的一种方式，这种隐藏方式会将元素彻底从页面中删除，不会触发任何事件
- 元素也不占用任何空间，但通过该属性控制显示隐藏，会导致页面的回流和重绘
- 其子孙元素即使重新设置
display: block也无法显示 - 读屏软件无法读到该元素的内容
.hide{
display: none;
}
visibility: hidden
- 相当于是该元素现在是透明的了，元素在页面中仍占据空间，但是不会响应绑定的监听事件
- 该属性是可以继承的，所以如果不显式的设置其子元素的属性，则其子元素的
visibility也为hidden，但若将其子元素显式设置visibility: visible，则该子元素依然可见，并且绑定的事件能够生效，并且可以通过冒泡触发父元素绑定的事件- 所以如果点击了下方的
son元素，控制台会依次打印son、father
- 所以如果点击了下方的
- 这种方式会触发页面的重绘，但是不会触发页面回流
- 元素在读屏软件中也会被隐藏
<style>
.father {
visibility: hidden;
width: 400px;
height: 400px;
margin-bottom: 20px;
color: #fff;
background-color: #000;
}
.son {
visibility: visible;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
<script>
const father = document.querySelector('.father')
const son = document.querySelector('.son')
// 由于子元素设置了visibility: visible;所以其依然是可见的，并且能够通过点击触发点击事件
son.addEventListener('click', () => {
console.log('son');
})
// 子元素被点击后会通过冒泡触发父元素绑定的点击事件
father.addEventListener('click', () => {
console.log('father');
})
</script>
opacity: 0
- 将元素的透明度设置为
0，以此来实现元素的隐藏，元素实际还是在页面存在的，仍然在页面中占据着空间 - 即使其子孙元素重新设置了
opacity: 1也无法显示 - 与
opacity不同的是它能响应元素绑定的监听事件 - 此外，元素和它所有的内容会被读屏软件阅读
.hide{
opacity: 1;
}
position: absolute
假设有一个元素你想要与它交互，但是你又不想让它影响你的网页布局，没有合适的属性可以处理这种情况（opacity 和 visibility 影响布局， display 不影响布局但又无法直接交互）。在这种情况下，你只能考虑将元素移出可视区域
- 视觉上的隐藏，实际显示在屏幕的可视区之外，以此来实现元素的隐藏
- 绝对定位会脱离文档流，不会占据空间，不影响其他元素的布局，且响应元素绑定的监听事件
- 元素的内容可以被读屏软件读取
.hide{
position: absolute;
top: -999999px;
left: -999999px;
}
z-index
z-index只适用于元素有定位（position值不为static）的情况- 来使其他元素遮盖住该元素，以而实现隐藏
<style>
.element1 {
width: 400px;
height: 400px;
background-color: #000;
}
.element2 {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div class="element1"></div>
<div class="element2"></div>
</body>
可以看到开启了绝对定位的红色盒子element2被遮挡住了
clip-path
clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状，当我们指定的形状大小为0时，就可以实现元素的隐藏- 元素仍在页面中占据位置，但是不会响应绑定的监听事件（区域内和区域外的都不会）
.hide{
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
transform: scale(0)或transform: translate(-9999px, -9999px)
- transform: scale(0)
- 将元素缩放为
0，来实现元素的隐藏 - 元素的内容可以被读屏软件读取
- 元素仍在页面中占据位置，但是不会响应绑定的监听事件
- transform: translate(-9999px, -9999px)
- 视觉上的隐藏，隐藏元素的依然占据着空间，影响其他元素的布局
- 元素的内容可以被读屏软件读取
.hide{
transform: scale(0);
}
// 或
.hide{
transform: translate(-9999px, -9999px);
}
设置height、width属性为0，再结合overflow: hidden进行隐藏
- 这种方式就是通过将元素的宽高设置为
0，使其不占据页面空间，最好将display设置为block，因为给行内元素设置宽高不会生效 - 使用属性
overflow:hidden控制其子元素的隐藏，并清除会影响页面的布局的属性，比如margin，padding、border等 - 视觉上的隐藏，隐藏元素的不会占据任何空间，不会影响其他元素的布局，用户无法与其进行直接的交互
.hide{
display:block;
overflow:hidden;
width:0;
height:0;
padding:0;
margin:0;
border:0;
}
hidden
HTML5新增的hidden属性，可以直接隐藏元素- 跟
display: none表现一致
<div hidden>
我是被隐藏的元素
</div>
补充：单独隐藏文字的方法
- text-indent:-9999
- 只能达到隐藏文字的效果，没有其他副作用
- 想进行SEO优化但又不想显示这段文字，就可以使用这个方法
.hide{
text-indent:-9999;
}
- font-size:0px
- 隐藏文字的效果，没有其他副作用
总结
实现元素显示隐藏的方式有多种，在开发中具体采用哪种实现方式，要考虑到显示隐藏操作引发的回流与重绘问题
| 隐藏方式 | 占据原来的空间 | 直接跟用户交互 | 直接响应DOM事件 |
|---|---|---|---|
| opacity | 是 | 是 | 是 |
| visibility | 是 | 否 | 否 |
| display | 否 | 否 | 否 |
| hidden | 否 | 否 | 否 |
| position | 否 | 否 | 否 |
| clip-path | 是 | 否 | 否 |
| overflow | 否 | 否 | 否 |
| transform | 是 | 否 | 否 |
