导语：CSS隐藏的秘密

一个div元素隐藏的本质是什么？这篇就说这个问题

一、隐藏一个元素有哪几种方法呢？

这个问题好回答，只要是做前端的同学都或多或少能回答，下面列出几个能立马想到的方法。

1、常见display:none

将元素设置为display:none后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是将元素设置display:none后，就会导致浏览器的重绘和重排。

2、可以设置visibility:hidden

下面举一个简单的例子

上下分别有两个div，代码是这样的：

当上面一个div.toptext设置display:none时，页面展示出来的效果是这样的：

结论是下面那个div.text已经往上移了。

当上面一个div.toptext设置visibility:hidden时，页面展示出来的效果是这样的：

结论是下面那个div.text并没有上移。

所以用visibility：hidden来设置元素隐藏时，元素本身还是占位的，也就是说这种方法适用于那些元素隐藏后不希望页面布局发生变化的场景。

3、opacity：0

当div元素设置opacity:0时，同样元素看不到，但是还是点位的，效果和visibility：hidden一样。

4、设置属性为0

这个方法算是技巧吧，将div元素的一些属性设置值为0，当这个div元素有子元素时，加上overflow：hidden，下面这样：

二、隐藏之后能点击吗？

上面我们通过各种方式可以将一个元素隐藏，这里我们在来证实一下隐藏的实质，给他们绑定一个点击事件。

像上面这样子，然而通过结果，我们发现在只有opacity：0时的div可以触发点击事件，原因也很简单，设置元素透明度为0后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发点击事件。

display：none无法点击可以理解，因为元素已经消失了，而visibility：hidden元素无法点击就说明元素也是消失的，只是依然占据着页面空间。最后是height：0元素，如果有子元素设置overflow：hidden也无法点击，元素相当于消失了。

结论真的是这样吗？当我给div.none加一行自动触发点击事件时：像下面这样

$(".none").click()

结果发现控制台输出

// none clicked

所以前面无法触发点击事件的真正原因是鼠标无法真正接触到被设置成隐藏的元素（指的是大小）。

三、写到最后的总结：

隐藏一个div元素也许很简单，但是知道一个元素隐藏的本质切需要我们花点time去思考，这就是一种玩代码的乐趣。也能学到东西。

小郑子每天给你推知识，讲完理论后期还有各种前端项目实战，如果这些对您有益，敬请关注。

本文内容由小海整理编辑！