CSS“隐藏”元素的几种方法的对比

一提及CSS隐藏元素，我想大部分小伙伴们都会想到的第一种方法就是设置display为none。这是最为人所熟知也是最经常使用的方法。我相信还有很多人想到使用设置visibility为hidden来隐藏元素，这种方式也是经常使用的方法，并且也有不少人知道二者的不一样。除了这两种方法，本文还总结了一些比较不经常使用的方法，比较了这几种“隐藏”元素方法的区别和优缺点，欢迎你们交流！！css

几种方法的简单介绍

首先咱们分别来讲说到底有哪几种隐藏元素的方法，有一些方法是众所周知的，还有一些算是一种技巧。jquery

display:none

设置元素的display为none是最经常使用的隐藏元素的方法。浏览器

1 .hide {
2     display:none;
3 }

将元素设置为display:none后，元素在页面上将完全消失，元素原本占有的空间就会被其余元素占有，也就是说它会致使浏览器的重排和重绘。ide

visibility:hidden

设置元素的visibility为hidden也是一种经常使用的隐藏元素的方法，和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，因此它只会致使浏览器重绘而不会重排。布局

1 .hidden{
2     visibility:hidden
3 }

visibility:hidden适用于那些元素隐藏后不但愿页面布局会发生变化的场景post

opacity:0

opacity属性我相信你们都知道表示元素的透明度，而将元素的透明度设置为0后，在咱们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。性能

1 .transparent {
2     opacity:0;
3 }

这种方法和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但咱们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。测试

设置height，width等盒模型属性为0

这是我总结的一种比较奇葩的技巧，简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，若是元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，这算是一种奇技淫巧。动画

1 .hiddenBox {
2     margin:0;
3     border:0;
4     padding:0;
5     height:0;
6     width:0;
7     overflow:hidden;
8 }

这种方式既不实用，也可能存在着着一些问题。但平时咱们用到的一些页面效果可能就是采用这种方式来完成的，好比jquery的slideUp动画，它就是设置元素的overflow:hidden后，接着经过定时器，不断地设置元素的height，margin-top，margin-bottom，border-top，border-bottom，padding-top，padding-bottom为0，从而达到slideUp的效果。this

元素隐藏后的事件响应

若是被隐藏的元素绑定了一些事件，咱们执行了相关操做后，这些事件是否会被响应并执行呢，看看下面的代码：

 1 <style>
 2     div { 
 3         width: 100px; 
 4         height: 100px; 
 5         background: red; 
 6         margin: 15px; 
 7         padding: 10px; 
 8         border: 5px solid green; 
 9         display: inline-block; 
10         overflow: hidden; 
11     }
12     .none { display: none; }
13     .hidden { visibility: hidden; }
14     .opacity0 { opacity: 0; }
15     .height0 { height: 0; }  
16 </style>  
17 
18 <div class="none"></div>
19 <div class="hidden"></div>
20 <div class="opacity0"></div>
21 <div class="height0">aa</div>  
22 
23 <script src="/Scripts/jquery-1.10.2.min.js"></script>
24 <script>
25     $(".none").on("click", function () {
26         console.log("none clicked");
27     })
28     $(".hidden").on("click", function () {
29         console.log("hidden clicked");
30     })
31     $(".opacity0").on("click", function () {
32         console.log("opacity0 clicked");
33     })
34     $(".height0").on("click", function () {
35         console.log("height0 clicked");
36     })
37 </script>

这段代码将四种隐藏元素的方法分别展现出来，而后绑定其点击事件，通过测试，主要有下面的结论：

一、display:none：元素完全消失，很显然不会触发其点击事件
二、visibility:hidden：没法触发其点击事件，有一种说法是display:none是元素看不见摸不着，而visibility:hidden是看不见摸得着，这种说法是不许确的，设置元素的visibility后没法触发点击事件，说明这种方法元素也是消失了，只是依然占据着页面空间。
三、opacity:0：能够触发点击事件，缘由也很简单，设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来讲，它仍是存在的，因此能够触发点击事件
四、height:0：将元素的高度设置为0，而且设置overflow:hidden。使用这种方法来隐藏元素，是否能够触发事件要根据具体的状况来分析。若是元素设置了border，padding等属性不为0，很显然，页面上仍是能看到这个元素的，触发元素的点击事件彻底没有问题。若是所有属性都设置为0，很显然，这个元素至关于消失了，即没法触发点击事件。

可是这些结论真的准确吗？
咱们在上面的代码中添加这样一句代码：

1 $(".none").click();

结果发现，触发了click事件，也就是经过JS能够触发被设置为display:none的元素的事件。
因此前面没法触发点击事件的真正缘由是鼠标没法真正接触到被设置成隐藏的元素！！！

CSS3 transition对这几种方法的影响

CSS3提供的transition极大地提升了网页动画的编写，但并非每一种CSS属性均可以经过transition来进行动画的。咱们修改代码以下：

 1 <style>
 2     div { 
 3         width: 100px; 
 4         height: 100px; 
 5         background: red; 
 6         margin: 15px; 
 7         padding: 10px; 
 8         border: 5px solid green; 
 9         display: inline-block; 
10         overflow: hidden; 
11         transition: all linear 2s;  
12     }
13 </style>  
14 
15 <div class="none"></div>
16 <div class="hidden"></div>
17 <div class="opacity0"></div>
18 <div class="height0">aa</div>  
19 
20 <script src="/Scripts/jquery-1.10.2.min.js"></script>
21 <script>
22 $(".none").on("click", function () {
23     console.log("none clicked");
24     $(this).css("display", "none");
25 })
26 $(".hidden").on("click", function () {
27     console.log("hidden clicked");
28     $(this).css("visibility", "hidden");
29 })
30 $(".opacity0").on("click", function () {
31     console.log("opacity0 clicked");
32     $(this).css("opacity", 0);
33 })
34 $(".height0").on("click", function () {
35     console.log("height0 clicked");
36     $(this).css({
37         "height": 0,
38     });
39 })
40 </script>

通过测试，能够看到：
一、display:none：彻底不受transition属性的影响，元素当即消失
二、visibility：hidden：元素消失的时间跟transition属性设置的时间同样，可是没有动画效果
三、opacity和height等属性可以进行正常的动画效果

假设咱们要经过CSS3来作一个淡出的动画效果，应该以下：

1 .fadeOut { visibility: visible; opacity: 1; transition: all linear 2s; }
2     .fadeOut:hover { visibility: hidden; opacity: 0; }

应该同时设置元素的visibility和opacity属性。

总结说明

本文总结说明了“隐藏”元素的几种方式，其中最经常使用的仍是display:none和visibility:hidden。其余的方式只能算是奇技淫巧，并不推荐使用它们来隐藏元素，它们的真正用途应该不在隐藏元素，而是经过了解这些方法的特色，挖掘出其真正的使用场景。欢迎你们交流！！

补充

来自评论区小伙伴们补充的技巧：

一、设置元素的position与left，top，bottom，right等，将元素移出至屏幕外

二、设置元素的position与z-index，将z-index设置成尽可能小的负数

本文地址：http://luopq.com/2016/02/15/tricks-of-hide-element/，转载请注明