css 隐藏元素display visibility opacity

display:none

visibility:hidden

opacity:0

1.使用 opacity 和 visibility 属性时，元素还是会占据页面空间的，而使用 display 属性时，元素不占据页面空间。

2.使用 opacity 和 display 属性时，父元素对子元素的影响很明显，子元素设置的 opacity 和 display 属性是不起作用的，显示的效果和父元素一样，而使用 visibility 属性时，子元素如果设置为 visibility:visible; 并没有受父元素的影响，可以继续显示出来。

3.使用 visibility 和 display 属性，自身的事件不会触发，而使用 opacity 属性，自身绑定的事件还是会触发的。

visibility 和 display 属性是不会影响其他元素触发事件的，而 opacity 属性 如果遮挡住其他元素，其他的元素就不会触发事件了。

4. dispaly 属性会产生回流，而 opacity 和 visibility 属性不会产生回流。

dispaly 和 visibility 属性会产生重绘，而 opacity 属性不一定会产生重绘。

5. opacity 是支持 transition的，一般淡入淡出的效果就是这样实现的。

visibility 也是支持 transition 的。