隐藏属性的区别

display none

隐藏元素将不占据页面位置，浏览器将进行重排和重绘。属性可被继承，子元素也将隐藏。设置transition将没有效果。

visibility hidden

元素虽然看不见了，但是仍然占据页面空间。属性被继承，但是可以通过visibility: visible;设置子元素可见。浏览器将重绘但不进行重排。可以设置transition属性。

opacity 0

只是降低alpha值达到透明效果，但是是存在的，也能触发事件。所以浏览器不会进行重排和重绘。支持transition，不能通过子元素设置opacity复原。