CSS中，display：none、visibility：hidden 和 opacity：0 之间的区别

1、display:none隐藏， display:black 显示；
2、visibility: hidden 隐藏， visibility: visible 显示；
3、 opacity: 0 隐藏， opacity：1 显示；

不同点：
1、是否占据空间

display:none 隐藏之后不占位置，该元素和它所有的后代元素都会被隐藏，也无法使用屏幕阅读器等辅助设备访问；
visibility: hidden 隐藏元素占用与未隐藏时一样的空间，会影响页面布局；
opacity: 0 是让元素产生透明度，隐藏占据空间

2、子元素是否继承

display:none 不会被子元素继承，父元素都不存在了，子元素也不会显示出。
visibility:hidden 会被子元素继承，通过设置子元素visibility:visible来显示子元素。
opacity:0 会被子元素继承，但是不能设置子元素opacity:0来重新显示。

3、事件绑定

display:none 的元素都已经不再页面存在了，因此无法触发它绑定的事件。
visibility:hidden 不会触发它上面绑定的事件。
opacity:0 元素上面绑定的时间是可以触发的。

4、过渡动画

transition 对于 display 是无效的。
transition 对于 visibility是无效的。
transition 对于 opacity 是有效的。

5、是否会产生生回流和重绘

display: none 会产生回流和重绘，
visibility:hidden 只会引起页面重绘
opacity:0 只会引起页面重绘

其它隐藏元素的方法：

type="hidden"的表单元素。
宽度和高度都显式设置为0。