visibility，display，opacity的区别？

相同点：

visibility和display都能实现元素的显示和隐藏
display: none; 隐藏元素
display: block; 显示元素
display: inline; 元素转换为行内元素
display: inline-block; 元素转换为行内块元素

---

visibility:hidden; 隐藏元素
visibility: visible;显示元素

---

opacity: 0是视觉上消失了，透明度为0，在文档流中站位，浏览器会解析

---

区别：

1.性能比较

使用visibility:hidden比display:none性能上要好，display:none切换显示时，页面产生回流（回流:当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流，opacity页面不会产生回流。

2.是否占据空间

display: none ； 是彻底消失，不在文档流中占位，浏览器也不会解析该元素
visibility:hidden； 是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；

3.动画效果

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

4.事件绑定

display:none的元素在页面已经不存在了，所以在它上面绑定的事件无法触发；
visibility:hidden 元素虽然占据一定空间，但是在它上面绑定的事件是无法触发；
opacity: 0元素上面绑定的事件是可以触发的。

5.子元素继承

display:none 不会被子元素继承,给子元素设置display：block;子元素不会显示；
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible ；可以让子元素显示出来；
opacity: 0 也会被子元素继承，给子元素设置opacity: 1；子元素不会显示。

效果图如下（区别特别明显）：