1. 程式人生 > >有趣的css—隱藏元素的7種思路

有趣的css—隱藏元素的7種思路

# 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 display : none ``` ## 第二種:隱藏元素 ### visibility: hidden 將**visibility**設定為**hidden**會使元素不可見,但此時元素仍然位於可訪問性樹中(**display: none**時元素被移出可訪問性樹 ),註冊點選事件無效。 ==程式碼:== ```html visibility: hidden
``` ## 第三種:透明 ### opacity: 0 **opacity**(不透明度),取值範圍**0**(==完全透明==) ~ **1**(==完全不透明==),將**opacity**設定為**0**會使元素**完全透明**,此時元素不可見(**因為它是透明的**),仍然位於可訪問性樹中,註冊點選事件有效。 ==程式碼:== ```html opacity: 0
``` ### transparent 將元素的**background-color**、**color**和**border-color**設定為**transparent**(**透明**),此時元素不可見(**因為它是透明的**),仍然位於可訪問性樹中,註冊點選事件有效。 ==程式碼:== ```html transparent
``` ### rgba(0,0,0,0) 從技術上說,**transparent**是 **rgba(0,0,0,0)** 的簡寫,將元素的**background-color**、**color**和**border-color**設定為**rgba(0,0,0,0)**(**透明**),此時元素不可見(**因為它是透明的**),仍然位於可訪問性樹中,註冊點選事件有效。 ==程式碼:== ```html rgba(0,0,0,0) ``` rgba只需要第四個引數為0即可達到隱藏元素的效果。 ### hsla(0,0%,0%,0) **hsla**使用元素隱藏的機制與**rgba**一致,都是由第四個引數**Alpha**所控制的,將元素的**background-color、color和border-color**設定為**hsla(0,0%,0%,0)**,此時元素不可見(**因為它是透明的**),仍然位於可訪問性樹中,註冊點選事件有效。 ==程式碼:== ```html hsla(0,0%,0%,0) ``` hsla和rgba一致,只需要第四個引數為0即可達到隱藏元素的效果。 ### filter: opacity(0%) **filter**(**濾鏡**) **opacity**(**0% ~ 100%**)轉化影象的透明程度,值範圍於**0%**(==完全透明==) ~ **100%**(==完全不透明==)之間。將元素的**filter**設定為**opacity(0%)**,此時元素不可見(**因為它是透明的**),仍然位於可訪問性樹中,註冊點選事件有效。 ==程式碼:== ```html filter: opacity(0%) ``` ## 第四種:縮放 ### transform: scale(0, 0) 將**transform**設定為**scale(0, 0)**會使元素在x軸和y軸上都縮放到**0**畫素,此元素會顯示,也會佔用位置,但是因為已經縮放到**0%**,元素和內容佔用畫素比為**0*0**,所以看不到此元素及其內容,也無法點選。 ==程式碼:== ```html transform: scale(0, 0) ``` ### 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 width: 0;height: 0;overflow: hidden ``` ## 第五種:旋轉 ### transform: rotateX(90deg) 將元素沿著X軸順時針旋轉90度達到隱藏元素的效果。 ==程式碼:== ```html transform: rotateX(90deg) ``` ### transform: rotateY(90deg) 將元素沿著Y軸順時針旋轉90度達到隱藏元素的效果。 ==程式碼:== ```html transform: rotateY(90deg) ``` ## 第六種:脫離螢幕顯示位置 脫離螢幕顯示位置同樣可以使元素不可見,但是達到這種效果的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