-
display: none
的元素不占据任何空间,visibility: hidden
的元素空间保留; -
display: none
会影响css3的transition
过渡效果,visibility: hidden
不会; -
display: none
隐藏产生重绘 ( repaint ) 和回流 ( relfow ),visibility: hidden
只会触发重绘;(回流重绘知识点参考:真正理解重绘和回流) -
株连性:
display: none
的节点和子孙节点元素全都不可见,visibility: hidden
的节点的子孙节点元素可以设置visibility: visible
显示。visibility: hidden
属性值具有继承性,所以子孙元素默认继承了hidden
而隐藏,但是当子孙元素重置为visibility: visible
就不会被隐藏。