visibility 和 display 、 opacity的差别

不同点

1、display: none; 元素消失，脱离文档流。

造成页面重排和重绘。
子元素跟随父元素被隐藏，并且无法单独显示
绑定的事件也无法触发。

2、opacity: 0; 元素透明度为0；

造成页面重绘不重排；
子元素 opacity:1 无效，仍不显示；
绑定的事件仍旧可以触发。

3、visibility:hidden; 元素不可见；
子元素设置 visibility:visible; 后，子元素显示；
绑定的事件不能触发；

共同点：

DOM节点是存在的，仍旧可以用js 操作DOM。