display:none和visibility:hidden和opacity:0的区别

css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。
区别：

1. display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素(看不见摸不着)；
   visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素（看不到摸不着）；
   opacity:0 是看不见摸得着
2. 使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流和重绘（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流，引起重绘。
3. visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。
4. visibility: hidden不会影响计数器的计数，visibility: hidden虽然让一个元素不见了，但是其计数器仍在运行。
5. CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果，提高用户体验。