CSS中很多隱藏元素的方法，但這些方法的可訪問性、布局、動畫、性能和事件處理的方式有所不同。

• 動畫： 一些CSS隱藏元素的方法一般是全有或者全無，元素要么是完全可見，要么是完全不可見，并且沒有中間狀態。其他的，比如透明度，可以是一個范圍的值，所以在這中間過程插入動畫成為可能；
• 可訪問性： 下面的每一種方法都會在視覺上隱藏一個元素，但不一樣會真正的去除DOM元素。有一些方式隱藏元素后，屏幕閱讀器仍然能讀取到元素內容；
• 事件處理： 隱藏元素之后，有些方式元素上的事件仍然能被觸發，而有些方式就會導致元素上的事件觸發無效；
• 表現： 瀏覽器加載并解析 HTML DOM 和 CSS 對象模型后，頁面將分三個階段呈現：布局（生成每個元素的幾何位置）、繪制（繪制每個元素的像素）、組合（以適當的順序放置元素層）。僅導致構圖變化的效果明顯比影響布局的效果更好。在某些情況下，瀏覽器還可以使用硬件加速。

下面就來看看CSS中隱藏元素的方式，以及每種方式的優缺點。

1. opacity 和 filter: opacity()

opacity: N 和 filter: opacity(N) 屬性可以傳遞一個 0 到 1 之間的數字，或者 0% 和 100% 之間的百分比，對應地表示完全透明和完全不透明。

• opacity: N：該屬性用來設置元素的透明度；
• filter: opacity(N) ：filter屬性用來設置元素的濾鏡，opacity是濾鏡重的透明度，用來設置元素的透明度。

div {
    opacity: 0;
}

div {
    filter: opacity(0%);
}
復制代碼

在現代瀏覽器中，這兩者之間幾乎沒有實際的區別，但如果同時應用多種效果（模糊、對比度、灰度等）時，應該使用 filter 屬性。

注意：opacity 可以設置動畫并提供出色的性能，但頁面上保留完全透明的元素可能會觸發事件。

2. color alpha 透明度

可以將元素的color、background-color 和 border-color 等屬性設置為rgba(0,0,0,0)，這樣就會使元素完全透明：

div {
	color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}
復制代碼

這三個屬性都是支持設置動畫效果的，需要注意，透明度不能應用于帶有背景圖片的元素，除非它們是使用 linear-gradient 或類似方法生成的。

Alpha 通道可以設置為：

• transparent：完全透明（中間不能插入動畫）；
• rgba(r, g, b, a)：紅色、綠色、藍色和 alpha；
• hsla(h, s, l, a)：色相、飽和度、亮度和 alpha；
• #RRGGBBAA 或 #RGBA。
• 
  

3. transform

transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏：

div {
	transform: scale(0);
}

div {
	translate(-9999px, 0px)
}
復制代碼

transform 屬性提供了出色的性能和硬件加速，因為元素被有效地移動到了單獨的層中，并且可以在 2D 或 3D 中進行動畫處理。原始的布局空間會保持原樣，并不會受影響。使用這種方式隱藏的元素不會觸發任何事件。

4. clip-path

clip-path 屬性可以創建一個剪輯區域，用于確定元素的哪些部分是可見的。使用 clip-path: circle(0) 可以將元素進行隱藏。

div {
	clip-path: circle(0);
}
復制代碼

clip-path為添加動畫效果提供了空間，不過它只能在現代瀏覽器中使用。

5. visibility: hidden

visibility 屬性可以設置為 visible 或 hidden 來顯示和隱藏元素。

div {
	visibility: hidden;
}
復制代碼

除非使用collapse值，否則元素使用的空間保持不變。

6. display: none

display 可能是最常用的元素隱藏方法; 。當其值為 none 時元素就隱藏了。被隱藏的元素不會在頁面中占據位置，也不會響應綁定的監聽事件。

div {
  display: none;
}
復制代碼

然而，在大多數情況下，display 可能是最糟糕的 CSS 屬性。除非使用 position:absolute 將元素移出文檔流，或者采用contain屬性，否則它的隱藏過程無法設置動畫，并將觸發頁面重新布局。

7. z-index

可以通過將元素的 z-index 屬性設置為負值，以實現元素的隱藏。這實際上就是將元素放在了我們看不到的層。

div {
  z-index: -1;
}
復制代碼

8. position

position屬性允許使用top、bottom、left、right 從頁面中的默認位置移動元素。因此，絕對定位的元素可以通過左鍵：-9999px 等值移出屏幕：

div {
  position: absolute;
  left: -999px;
}
復制代碼

9. 覆蓋另一個元素

通過在元素的上面放置與背景顏色相同的元素，可以在視覺上隱藏一個元素。下面來使用::after偽元素來實現：

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}
復制代碼

雖然這從技術上講是可以實現的，但是這樣做需要更多的代碼。

10. 縮小尺寸

可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸以實現元素的隱藏。可能還需要應用 overflow: hidden; 來確保內容不會溢出。

div {
  height: 0;
  padding: 0;
  overflow: hidden;
}
復制代碼

使用這種形式我們可以在隱藏過程中使用動畫效果，并且他的性能會比 transform 好很多。

分類：

個視頻來說一個有時候前端面試會問到的CSS的面試題，就是讓元素隱藏的這幾種方式，它們具體的用法和區別。具體去用我相信大家都用過，但是要把這個題回答的很好，把它們之間的區別捋清，不妨來說一下。

這里寫了兩個div，一個紅色、一個藍色，現在把紅色這個給它隱藏掉，上面寫的3種方法都可以把它隱藏掉。區別在哪里？

·先來試一下opacity，紅色的div確實不見了。

·再來試一下第二種visibility，刷新一下，紅色的div也是看不見了，好像和第一種方法沒什么區別。

·最后來試一下display，這種方法，紅色的div不單止不見了，連藍色的div它的位置也發生改變了。

先來說一下前面兩種，因為前面兩種方式，它們表現出來的形式實在太像了。現在用的是opacity，其實是改變了元素的透明度，也就是讓它完全透明了，所以才看不到它。但實際上它還是存在的，還是在這里的，只是看不到而已。所以這個方式，它是需要對元素所占的空間的給它排列出來，也就是它還是占的這個空間的。

其次不光是把它所占的空間排列出來，瀏覽器還需要對元素進行渲染，只不過是把它渲染成透明的，它還是存在的，所以是可以對它進行交互操作的，這一點等一下可以通過js去證明。

接著就是把visibility設置成hidden，這一個的排列方式和剛才設置透明度的是一樣的，但是它們有什么區別？這個看得出來，還是需要對它所占的空間進行排列的，它還是占著那個位置的，但是它也僅僅是占著那個空間而已。瀏覽器已經不對元素進行渲染了，所以空間給你保留，但是元素不存在，就沒辦法進行交互了。

最后就是display為none，很明顯藍色的div它的位置已經改變了，它占據了原本紅色div的位置，也就是紅色div原本的那個位置空間已經沒有了。其實這種方式，已經不是單純的把元素給隱藏了，已經是把元素的核模型給修改了，直接就把這個元素給干沒了，所以它是既不排列也不渲染。

如果是作為一個面試題來回答，最好還回答到一點，在這三個里面來比較，opacity透明度的這種方式它是最消耗性能的，因為不單止要幫你把位置空出來，還要完完全全的把你給渲染出來，只不過是渲染成透明的，所以它是這三個里面最消耗性能的。

visibility它就是沒那么消耗性能，因為這個只是給它保留個位置，保留個空間就可以了，不用對它進行渲染，所以它就沒那么消耗性能，display的方式就是完全不消耗性能了。

最后再來看一下用opacity這個元素是不是真的還存在，還可以交互，然后用visibility就已經不可以交互了，這里再把它改成opacity，來寫一下js，這里很簡單，就給它添加一個點擊事件，因為這個元素它還存在，肯定就可以點得到它。

把鼠標移到這個位置，看一下這個元素還存不存在，還可不可以點擊得到它，點擊一下，發現沒有，可以彈出這個OK，證明這個元素它還是存在的，只不過看不到它而已。再把前面給它改一下，改成visibility的方式，再來點這個位置，現在無論我怎么點它都沒有反應了，因為這個元素它壓根就不存在了，只是空著這個位置在這里而已。

這個視頻就到這里，感謝大家的收看。