导航

CSS元素的隐藏

Posted on 2013-10-15 16:46  小强有毒  阅读(178)  评论(0)    收藏  举报 
在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。下面一个个列出
 1 { display: none; /* 不占据空间，无法点击 */ }
 2 { visibility: hidden; /* 占据空间，无法点击 */ }
 3 { position: absolute; top: -999em; /* 不占据空间，无法点击 */ }
 4 { position: relative; top: -999em; /* 占据空间，无法点击 */ }
 5 { position: absolute; visibility: hidden; /* 不占据空间，无法点击 */ }
 6 { height: 0; overflow: hidden; /* 不占据空间，无法点击 */ }
 7 { opacity: 0; filter:Alpha(opacity=0); /* 占据空间，可以点击 */ }
 8 { position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占据空间，可以点击 */ }
 9 {
10 zoom: 0.001;
11 -moz-transform: scale(0);
12 -webkit-transform: scale(0);
13 -o-transform: scale(0);
14 transform: scale(0);
15 /* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */}{
16 position: absolute;
17 zoom: 0.001;
18 -moz-transform: scale(0);
19 -webkit-transform: scale(0);
20 -o-transform: scale(0);
21 /* 不占据空间，无法点击 */}