display:none和visibility:hidden

先看一下在css中，能够隐藏元素的方法有哪些

{ display: none; /* 不占据空间，无法点击 */ }

{ visibility: hidden; /* 占据空间，无法点击 */ }

{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ }

{ position: relative; top: -999em; /* 占据空间，无法点击 */ }

{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }

{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }

{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }

重点说一下其中使用频率最高的两种display:none和visibility:hidden，这哥俩有什么区别呢

青铜回答：空间占据

display: none不占据空间；visibility: hidden占据空间

黄金回答：株连性（继承）

display: none 非继承属性 一旦父节点设置了以后，本身以及子孙所有节点都不可见，怎么挣扎都于事无补，就像游戏里面打怪boss死了小怪就直接清零了

visibility: hidden 继承属性 子孙节点消失是由于继承了hidden，通过设置visibility：visible，可以让子孙节点显示。

王者回答：性能问题

其实这个也是因为空间占据的问题引起的

display: none由于不会占据空间，所以会引起回流和重绘；而visibility: hidden还占据空间所以只会引起重绘

关于重绘和回流可以移步CSS之 重绘和回流