常用的元素隐藏的方法及区别

display：none

特点：

• 不占据空间，不能点击。
• 会引起回流。
• 株连性。当父级的元素进行display：none进行隐藏后，他的所有子孙都会被无条件隐藏，没有余地。

visibility:hidden

特点：

• 会占据空间，不能点击。
• 会引起重绘。
• 虚假株连性。当父级的元素进行visibility:hidden进行隐藏后，他的所有子孙都会被无条件隐藏，但是留有余地。当后子孙元素设置visibility:visible后，就会显现。

opacity：0

特点：

• 会占据空间，可以点击。
• 会引起重绘。
• 株连性。当父级的元素进行opacity：0进行隐藏后，他的所有子孙都会被无条件隐藏，没有余地。

其他方法

{ position: absolute; top: -999em; /* 不占据空间，无法点击 */ } 
{ position: relative; top: -999em; /* 占据空间，无法点击 */ } 
{ position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ } 
{ height: 0; overflow: hidden; /* 不占据空间，无法点击 */ } 
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 ，filter:Alpha(opacity=0);是用来兼容ie的代码。防止opacity元素失效*/ } 
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }