一、CSS元素隐藏
在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。
{ display: none; /* 不占据空间,无法点击 */ }
{ visibility: hidden; /* 占据空间,无法点击 */ }
{ opacity: 0; filter:Alpha(opacity=0); /* 占据空间,可以点击 */ }
{ position: absolute; clip:rect(1px 1px 1px 1px); /* 不占据空间,无法点击 */ }
{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }
{ position: relative; top: -999em; /* 占据空间,无法点击 */ }
{ position: absolute; visibility: hidden; /* 不占据空间,无法点击 */ }
{ height: 0; overflow: hidden; /* 不占据空间,无法点击 */ }
{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间,可以点击 */ }
{
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* IE6/IE7/IE9不占据空间,IE8/FireFox/Chrome/Opera占据空间。都无法点击 */
}
{
position: absolute;
zoom: 0.001;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
/* 不占据空间,无法点击 */
}
2. display:none和visibility:hidden的区别
1.空间占据
将元素设置为display:none后,该元素在文档中不占据空间;使用visibility:hidden设置
不可见时,元素在文档中占据正常的文档流空间(即该元素本来在哪里,设置不可见后仍占据元素
原来位置)
2.回流与渲染
display:none隐藏产生reflow和repaint(重排与重绘),
而visibility:hidden没有这个影响前端性能的问题
3.株连性
当父节点元素应用了display:none,父节点及其子孙节点元素全部不可见,
而且无论其子孙元素如何不屈地挣扎都无济于事。
当父元素应用来visibility:hidden,则其子孙后代也都会全部不可见,
但其子孙后代可通过设置visibility:visible使自身变得可见
3.opacity
只是将该元素透明度设置为0,且可叠加,具有覆盖性
参考:http://www.zhangxinxu.com/wordpress/2012/02/css-overflow-hidden-visibility-hidden-disabled-use/