CSS中有哪些隐藏页面元素的方法?

目录

一、前言

二、隐藏页面元素的实现方法

1.利用display:none实现

2.利用visibility:hidden隐藏元素

3.利用opacity:0来隐藏元素

4.设置width,height属性为0隐藏元素

5.利用绝对定位position:隐藏元素

三、display:none、visibility:hidden、opacity的区别

四、小结

---

一、前言

  在我们进行项目开发阶段，肯定会遇到很多需要隐藏元素的需求，并且每次遇到的需求都限制了我们需要特定的方法去隐藏元素。

    如消消乐游戏中，当我们消除成功后，我们就不能使用display:none去隐藏元素。这样会导致后面的元素重新计算元素的位置，使位置发生错乱，这时我们就应该使用 visibility:hidden 来实现该效果。

二、隐藏页面元素的实现方法

1.利用display:none实现

这是我们比较常见的隐藏元素的方法，通过销毁元素，使元素彻底消失，不在占据位置，后面的元素会占据该元素占据的位置，所以一定会触发重排(回流)

具体实现:

未给第一个元素div设置display

效果图如下

当给第一个元素设置display时，通过给第一个盒子设置display,并且测试给第一个盒子绑定点击事件，是否会触发。

 

 红色盒子彻底消失，后面的绿色盒子占据了红色盒子的位置，并且自定义事件不会触发

 特点：元素不可见，不占据空间，无法响应点击事件

2.利用visibility:hidden隐藏元素

通过给元素设置为不可见达到隐藏元素的效果,元素还存在，只是设置为了不可见，所以只是触发了重绘，并不会触发重排。

当给第一个元素设置visibility:hidden时

效果如下,点击空白处第一个元素位置，不能响应点击事件.

特点：元素不可见，占据页面空间，无法响应点击事件

3.利用opacity:0来隐藏元素

opacity属性:用来设置元素的透明度，它不仅对颜色有效，对图像或者页面中其它的元素也有效。

语法：

opacity:value | inherit

值	描述
value	规定不透明度，从0.0（完全透明）到 1.0 （完全不透明）
inherit	应该从父元素继承opacity属性的值

通过将元素设置为完全透明（opacity:0）来达到隐藏元素的效果，会占据原有的位置，不一定会引起重绘

当给第一个元素设置opacity:0 时,达到的页面效果和visibility相同,但是通过点击第一个元素，会触发自定义事件。

特点：改变元素透明度，元素不可见，占据页面空间，可以响应点击事件

4.设置width,height属性为0隐藏元素

块级元素:块级元素会独占一行(即无法与其他元素显示在同一行内,同时块级元素必须设置宽高，才能正常显示。所以我们通过设置width,height为0可以达到隐藏元素的效果，页面上不显示元素且不占有位置，所以点击事件一定不会生效，且一定会触发重排（改变了元素怒的几何信息大小）

代码示例:

页面效果，只显示绿色盒子，第一个盒子不显示也没有占据位置，且不会出触发点击事件

特点：元素不可见，不占据页面空间，无法响应点击事件

5.利用绝对定位position:隐藏元素

实质上是将元素移除页面，达到隐藏元素的效果

#red {
    position: absolute;
    left: -99999px;
    top: -99999px;
}

三、display:none、visibility:hidden、opacity的区别

	display:none	visibility:hidden	opacity:0
页面中是否存在	不存在	存在	存在
重排	会	不会	不会
重绘	会	会	不确定
自身绑定事件	不触发	不触发	可触发
transition（动画）	不支持	支持	支持

重排一定会引起重绘，但重绘不一定会引起重排（后面我会对重绘和重排进行详解）

四、小结

     当我们遇到需要隐藏元素的场景时，可以考虑一下最终实现的效果，是否要显示元素，是否需要绑定自定义事件触发事件，是否需要增加动画效果（实现过渡效果）,同时还要考虑性能方面的问题（即是否会触发重排或者重绘），都是我们需要考虑的问题。

      以上便是我总结的隐藏元素的方法及特点，欢迎大家讨论，一起学习。