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
- mdn解释:
– display属性让你可以控制图形元素或容器元素的渲染。
– 将display设为none会导致容器与它所有的子元素不可见。
–如果display被设为none则该元素不接受任何事件。 - 使用方式:
display:none; - 脱离文档流 ,这种方式隐藏后,元素不占空间,onclick事件里面的alert方法也不会触发。(个人觉得,元素都找不到了也就没地方触发事件了)
visibility
- mdn解释:
–属性值为hidden:隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。要注意若将其子元素设为 visibility: visible,则该子元素依然可见。 - 代码:
visibility: hidden; - 这种方式对元素进行隐藏,可以看到元素本身还是占空间的,只是样式,里面的文字不展示了,并且子元素以外的区域事件不能触发,但是子元素中还是可以触发。
opacity
- mdn解释:
–opacity属性指定了一个元素的透明度。换言之,opacity属性指定了一个元素后面的背景的被覆盖程度。 - 代码:
opacity: 0; - 这种方式对元素进行隐藏,可以看到元素本身还是占空间的,只是样式,里面的文字不展示了,并且事件在元素内都能够触发。只有当#son1元素不为0的时候,子中子元素才会展示。