css隐藏元素详细理解

先总结：

1.display:none
本级元素和下级元素都会被隐藏，元素不占空间，不能触发事件
2.visibility:hidden
本级元素和下级都会隐藏，元素占空间，不能触发事件
如果另外设置子元素visibility: visible; 那么子元素会显示，并且可以触发事件，简单理解为元素内能看到的地方就可以触发事件
3.opacity: 0;
本级和下级都会被隐藏，元素占空间，可以触发事件
父元素的opacity不为0时，设置子元素的才能生效

以下是实验过程：
这里用一个父div#father,两个子div #son1，#son2,一个子中子元素测试，这里我们主要对son1这个div做隐藏操作，看隐藏结果，代码如下：

<div id="father" style=" height: 400px;width: 400px;background-color: lightgrey;">
	<div id="son1" style="height: 100px;width: 100px;background-color:green;"  onclick="alert('son1')">
		<div style="height: 50px;width: 50px;background:lightblue;visibility: visible;"</div>
	<div id="son2" style="height: 100px;width: 100px;background-color: red;"></div>
</div>

display

1. mdn解释：
   – display属性让你可以控制图形元素或容器元素的渲染。
   – 将display设为none会导致容器与它所有的子元素不可见。
   –如果display被设为none则该元素不接受任何事件。
2. 使用方式：
   display:none;
3. 脱离文档流 ，这种方式隐藏后，元素不占空间，onclick事件里面的alert方法也不会触发。（个人觉得，元素都找不到了也就没地方触发事件了）
   

visibility

1. mdn解释：
   –属性值为hidden：隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。
2. 代码：
   visibility: hidden;
3. 这种方式对元素进行隐藏，可以看到元素本身还是占空间的，只是样式，里面的文字不展示了，并且子元素以外的区域事件不能触发，但是子元素中还是可以触发。

opacity

1. mdn解释：
   –opacity属性指定了一个元素的透明度。换言之，opacity属性指定了一个元素后面的背景的被覆盖程度。
2. 代码：
   opacity: 0;
3. 这种方式对元素进行隐藏，可以看到元素本身还是占空间的，只是样式，里面的文字不展示了，并且事件在元素内都能够触发。只有当#son1元素不为0的时候，子中子元素才会展示。