CSS中如何讓元素隱藏的多種方法

在CSS中,讓元素隱藏(指屏幕范圍內肉眼不可見)的方法很多,有的占據(jù)空間,有的不占據(jù)空間;有的可以響應點擊,有的不能響應點擊。下面一個個列出,選一個適合你的

{ display: none; /* 不占據(jù)空間,無法點擊 */ }

{ visibility: hidden; /* 占據(jù)空間,無法點擊 */ }

{ position: absolute; top: -999em; /* 不占據(jù)空間,無法點擊 */ }

{ position: relative; top: -999em; /* 占據(jù)空間,無法點擊 */ }

{ position: absolute; visibility: hidden; /* 不占據(jù)空間,無法點擊 */ }

{ height: 0; overflow: hidden; /* 不占據(jù)空間,無法點擊 */ }

{ opacity: 0; filter:Alpha(opacity=0); /* 占據(jù)空間,可以點擊 */ }

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不占據(jù)空間,可以點擊 */ }

{

zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

/* IE6/IE7/IE9不占據(jù)空間,IE8/FireFox/Chrome/Opera占據(jù)空間。都無法點擊 */

}

{

position: absolute;

zoom: 0.001;

-moz-transform: scale(0);

-webkit-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

/* 不占據(jù)空間,無法點擊 */

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 先把css隱藏頁面元素有幾種方法列出來,方便查看以及使用,下文再分析其中的原理 display : none ; ...
    Amfishers閱讀 1,167評論 0 3
  • 一、CSS元素隱藏 在CSS中,讓元素隱藏(指屏幕范圍內肉眼不可見)的方法很多,有的占據(jù)空間,有的不占據(jù)空間; ...
    studystudy閱讀 326評論 0 0
  • 1、垂直對齊 如果你用CSS,則你會有困惑:我該怎么垂直對齊容器中的元素?現(xiàn)在,利用CSS3的Transform,...
    kiddings閱讀 3,199評論 0 11
  • 各種純css圖標 CSS3可以實現(xiàn)很多漂亮的圖形,我收集了32種圖形,在下面列出。直接用CSS3畫出這些圖形,要比...
    劍殘閱讀 9,676評論 0 8
  • 標題里的“失敗”是暫時的失敗。從長期來看學習、工作和生活都是由一個個周期組成。例如,學習從“不知道自己不知道”到“...
    水平生閱讀 232評論 0 0