HTML/CSS中让元素消失隐藏的方法介绍

HTML/CSS中让元素消失隐藏的方法介绍

1、display: none;
一个元素（标签）在html中生成带盒子展示在display属性中可以是display：inline，生成行盒；也可以是display：block生成块盒。当display取值为：none就是代表不生成盒子。在结构中，不占据空间，不响应事件，所以动态改变此属性时会引起重排。
2、visibility: hidden;
元素会被隐藏，但是不会消失，依然占据空间。
visibility: hidden会被子类继承，子类也可以通过显示的设置visibility: visible;来反隐藏。
visibility: hidden;不会触发该元素已经绑定的事件。
visibility: hidden;动态修改此属性会引起重绘。
transition无效。(会延迟n秒后hidden，但不会渐变)
3、opacity:0【透明度，取值为0-1】
opacity:0只是透明度为100%,元素隐藏，依然占据空间。【存在于文档流】
opacity:0 会被子元素继承,且子元素无法反隐藏。
opacity:0的元素依然能触发已经绑定的事件。
transition有效。
4、rgba【存在于文档流，跟opacity的区别是rgba只应用于当前，不会被子元素继承】
background：rgba(R, G, B, 0)，只是背景颜色透明，元素透明，依然占据空间。
background：rgba(R, G, B, 0)不会被子元素继承
依然能触发已经绑定的事件。
transition有效。
5、z-index: -1
在元素当前dom脱离文档流(position:absolute)的前提下，设置z-index才起作用。
设置z-index：-1本质是改变当前dom的层叠上下文，使器置于其他元素之下，达到被隐藏的目的。
部分重排，不影响其他图层布局
被其他元素遮挡部分，无法响应事件，即使上层元素设置了pointer-events:none;也无法点击到(注：这个属性会被继承的)