有趣的css—隱藏元素的7種思路
阿新 • • 發佈:2021-02-02
# 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