共同点
都让元素不可见
二者区别
-
隐藏后是否占据原有空间
display:none ,不占据空间,页面重新渲染
visibility:hidden 占据空间,不能触发点击事件
opacity:0 ,占据空间,仍可触发点击事件 -
性能
display:none 引起页面回流与重绘,性能消耗大
visibility:hidden 只造成本元素的重绘,性能消耗较少
opacity:0 只造成本元素重绘,性能消耗较少这一点的区别是由于是否隐藏后是否占据原有空间的区别而引起的
-
继承
display:none和opacity:0 非继承属性,修改子孙节点属也无法显示visibility:hidden 是继承属性,子孙节点由于继承了visibility:hidden才不显示,通过设置子节点visibility:visible就可以让子孙节点显示出来。
-
css3动画transition支持性
transition不支持display属性
transition动画支持opacity或者visibility属性
参考链接:https://www.cnblogs.com/wannananana/p/12460712.html