一个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去思考，这就是一种玩代码的乐趣。也可以学到东西。
小郑子每天给你推知识，讲完理论后期还有各种前台项目实战，假如这些对您有益，敬请关注。
