# css隱藏元素的7種思路 ## 前言 **display**、**visibility**、**opacity**三個屬性隱藏元素之間的異同點一直是前端面試面試的常考題。 屬性 | 值 | 是否在頁面上顯示 | 註冊點選事件是否有效| 是否存在於可訪問性樹中 -------- | -----| -----| -----| ----- display| none| 否| 否| 否 visibility| hidden| 否| 否| 是 opacity | 0| 否| 是| 是 除了**display**、**visibility**、**opacity**三個屬性可以隱藏元素之外，是否還存在其它屬性可以隱藏元素呢？它們之間又存在什麼必然的聯絡呢？這就是我們今天要討論的問題。 注：由於篇幅有限，本文並未提及一些像filter:alpha(opacity=0); zoom:0;之類的相容屬性。 ## 第一種：移除出可訪問性樹 ### display : none **display**屬性可以設定元素的內部和外部顯示型別。將**display**設定為**none**會將元素從可訪問性樹中移除。 ==程式碼：== ```html 按鈕 按鈕 ``` ## 第二種：隱藏元素 ### visibility: hidden 將**visibility**設定為**hidden**會使元素不可見，但此時元素仍然位於可訪問性樹中(**display: none**時元素被移出可訪問性樹 )，註冊點選事件無效。 ==程式碼：== ```html 按鈕 按鈕 ``` ## 第三種：透明 ### opacity: 0 **opacity**(不透明度),取值範圍**0**(==完全透明==) ~ **1**(==完全不透明==)，將**opacity**設定為**0**會使元素**完全透明**，此時元素不可見(**因為它是透明的**)，仍然位於可訪問性樹中，註冊點選事件有效。 ==程式碼：== ```html 按鈕 按鈕 ``` ### transparent 將元素的**background-color**、**color**和**border-color**設定為**transparent**(**透明**)，此時元素不可見(**因為它是透明的**)，仍然位於可訪問性樹中,註冊點選事件有效。 ==程式碼：== ```html 按鈕 按鈕 ``` ### rgba(0,0,0,0) 從技術上說，**transparent**是 **rgba(0,0,0,0)** 的簡寫，將元素的**background-color**、**color**和**border-color**設定為**rgba(0,0,0,0)**(**透明**)，此時元素不可見(**因為它是透明的**)，仍然位於可訪問性樹中,註冊點選事件有效。 ==程式碼：== ```html 按鈕 按鈕 ``` rgba只需要第四個引數為0即可達到隱藏元素的效果。 ### hsla(0,0%,0%,0) **hsla**使用元素隱藏的機制與**rgba**一致，都是由第四個引數**Alpha**所控制的，將元素的**background-color、color和border-color**設定為**hsla(0,0%,0%,0)**，此時元素不可見(**因為它是透明的**)，仍然位於可訪問性樹中，註冊點選事件有效。 ==程式碼：== ```html 按鈕 按鈕 ``` hsla和rgba一致，只需要第四個引數為0即可達到隱藏元素的效果。 ### filter: opacity(0%) **filter**(**濾鏡**) **opacity**(**0% ~ 100%**)轉化影象的透明程度,值範圍於**0%**(==完全透明==) ~ **100%**(==完全不透明==)之間。將元素的**filter**設定為**opacity(0%)**，此時元素不可見(**因為它是透明的**)，仍然位於可訪問性樹中，註冊點選事件有效。 ==程式碼：== ```html 按鈕 按鈕 ``` ## 第四種：縮放 ### transform: scale(0, 0) 將**transform**設定為**scale(0, 0)**會使元素在x軸和y軸上都縮放到**0**畫素，此元素會顯示，也會佔用位置，但是因為已經縮放到**0%**，元素和內容佔用畫素比為**0*0**，所以看不到此元素及其內容，也無法點選。 ==程式碼：== ```html 按鈕 按鈕 ``` ### width: 0;height: 0;overflow: hidden 將**width**和**height**都設定為**0**，使元素佔用畫素比為**0*0**，但此時會出現**兩種情況**： 當元素的**display**屬性為**inline**時，元素內容會將元素寬高拉開； 當元素的**display**屬性為**block**或**inline-block**時，元素寬高為**0**，但元素內容依舊正常顯示，此時再加上**overflow:hidden;**即可裁剪掉元素外的元素內容。 這個方法跟transform: scale(0,0)的不同點在於：**transform: scale(0,0)**是將元素與內容都進行縮放，而此方法是將元素縮放到**0px**，再裁剪掉元素外的元素內容。 ==程式碼：== ```html 按鈕 按鈕 ``` ## 第五種：旋轉 ### transform: rotateX(90deg) 將元素沿著X軸順時針旋轉90度達到隱藏元素的效果。 ==程式碼：== ```html 按鈕 按鈕 ``` ### transform: rotateY(90deg) 將元素沿著Y軸順時針旋轉90度達到隱藏元素的效果。 ==程式碼：== ```html 按鈕 按鈕 ``` ## 第六種：脫離螢幕顯示位置 脫離螢幕顯示位置同樣可以使元素不可見，但是達到這種效果的css樣式太多了，這裡只舉例一種情況說明。 ==程式碼：== ```html 按鈕 按鈕 ``` ## 第七種：遮蓋 使用元素遮蓋也可以使元素不可見，因為達到這種效果的css樣式也很多，故這裡只舉例一種情況說明。 ==程式碼：== ```html 按鈕 按鈕 ``` ## 結尾 本人才疏學淺，出現錯誤之處，還望指出。 ## 參考 - [1] [display | MDN](https://developer.mozilla.org/zh-cn/docs/web/css/display) - [2] [visibility | MDN](https://developer.mozilla.org/zh-cn/docs/web/css/visibility) - [3] [opacity | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/opacity) - [4] [transform | MDN](https://developer.mozilla.org/zh-cn/docs/web/css/transform) - [5] [overflow | MDN](https://developer.mozilla.org/zh-cn/docs/web/css/overflow) - [6] [color | MDN](https://developer.mozilla.org/zh-cn/docs/web/css/color_value) - [7] [transform | MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) - [8] [z-index | MDN](https://developer.mozilla.org/zh-cn/docs/web/css/z-index) - [9] [CSS3 顏色值RGBA表示方式](http://www.w3chtml.com/css3/values/color/rgba.html) - [10] [一個也許很傻的問題,在影象處理中alpha到底是什麼?](https://www.cnblogs.com/suogasus/p/531126