本文介绍了CSS中隐藏页面元素的六种方法：display:none、visibility:hidden、opacity:0、设置高度和宽度为0、position:absolute以及clip-path，并详细解析了它们的区别和应用场景。display:none会使元素完全消失且不占据空间；visibility:hidden保持元素占用的空间但使其不可见；opacity:0使元素透明但保留其空间并能响应事件；设置高度和宽度为0隐藏元素且不占空间；position:absolute移出可视区域；clip-path通过裁剪隐藏元素，但仍然占据空间。
一、前言
在平常的样式排版中，我们经常遇到将某个模块隐藏的场景
通过css隐藏元素的方法有很多种，它们看起来实现的效果是一致的
但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法
二、实现方式
通过css实现隐藏元素方法有如下：
- display:none
- visibility:hidden
- opacity:0
- 设置height、width模型属性为0
- position:absolute
- clip-path
display:none
设置元素的display为none是最常用的隐藏元素的方法
.hide {
display:none;
}
将元素设置为display:none后，元素在页面上将彻底消失
元素本身占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘
消失后，自身绑定的事件不会触发，也不会有过渡效果
特点：元素不可见，不占据空间，无法响应点击事件
visibility:hidden
设置元素的visibility为hidden也是一种常用的隐藏元素的方法
从页面上仅仅是隐藏该元素
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
