🍏 CSS 实现隐藏元素
相关问题：
- 在 CSS 中，有哪些方式可以实现隐藏页面的元素。
# 实现方式
有如下的方法：
# display:none
将元素的 display 属性设置为 none 。元素会在页面上彻底消失，不占用任何的空间（会导致浏览器重新排版渲染页面），无法响应点击事件。
# visibility:hidden
页面上隐藏元素（不会引发重排，但是会引发重绘），DOM 结果均会存在，会占用页面空间，但是无法响应点击事件。
# opacity:0
将元素的透明度设置为 0 （不会引发重排，但是会引发重绘），元素修改为不可见，会占用页面空间，可以响应点击事件。
设置盒子模型属性
不占据页面空间，无法响应点击事件。
🌰 例子：
.hidden {
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
overflow: 0;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# position:absolute
将元素移出可视区域，元素不可见，不影响页面布局。
🌰 例子：
.hidden {
position: absolute;
top: -9999px;
left: -9999px;
}
1
2
3
4
5
2
3
4
5
# clip-path
通过裁剪的形式，元素不可见，占据页面空间，无法响应点击事件。
🌰 例子：
.hidden {
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}
1
2
3
2
3
总结：最常用的是 display: none 和 visibility: hidden 。其他元素只是巧妙地将元素隐藏，真正用途并非隐藏元素。
# 参考
编辑 (opens new window)
📢 上次更新: 2022/09/02, 10:18:16