css隐藏元素 display、visibility、opacity的区别

display：none

1.相当于删除元素，会造成重排（回流）与重绘。
2.子元素跟随父元素被隐藏，并且无法单独显示。
3.绑定的事件也被删除了，不能触发

visibility：hidden

1.不会改变页面布局
2.父元素设置visibility：hidden,父元素和子元素都被隐藏
3.在2的前提下，子元素设置visibility：visible后，子元素会显示，父元素不会显示
4.绑定的事件不能触发

opacity：0

1.不会改变页面布局
2.父元素设置opacity：0,父元素和子元素都被隐藏
3.在2的前提下，子元素设置opacity：1是无效的，子元素仍然无法显示。
4.绑定的事件仍旧可以触发。