CSS 隱藏元素的八種方法

前言

總括： 本文詳細講述了在網頁中用CSS隱藏元素的七種方法。

• 原文博客地址：從隱藏元素談起

• 知乎專欄&&簡書專題：前端進擊者（知乎）&&前端進擊者（簡書）

• 博主博客地址：Damonare的我的博客

念念不忘,必有迴響;有一口氣,點一盞燈。

正文

提及隱藏元素我想每個前端er都能提及幾種，但能說全的我想就不是不少了。博主總結了幾種隱藏元素的方法，總結以下：

overflow:hidden
opacity:0；
visibility:hidden
display:none
position:absolute
clip(clip-path):rect()/inset()/polygon()
z-index:-1000
transform:scaleY(0)

咱們爲何會須要這麼多隱藏元素的方法呢，並且他們看起來實現的都是一樣的效果。其實每一種方法實際上都有一些細微的不一樣，這些不一樣決定了在一些特定場合下使用哪種方法。咱們下面細細探討下這些細微之處.

1. overflow

.hide{
     overflow:hidden; /* 佔據空間，沒法點擊 */
}複製代碼

overflow的hidden用來隱藏元素溢出部分，佔據空間，沒法響應點擊事件。

2.opacity

.hide{
    opacity:0;/* 佔據空間，能夠點擊 */
}
.hide_2{
    -webkit-filter:opacity(0);
    filter:opacity(0);/* 佔據空間，能夠點擊 */
}複製代碼

過濾元素filter也可以使用opacity值設置透明度，不過filter如今的兼容性很差，只支持webkit內核，這裏順帶一提。

opacity是用來設置元素透明度的，但當設置成0的時候也就至關於隱藏元素了。所以，元素依然存在原來的位置，佔據空間也可響應事件。若是你打算使用 opacity 屬性在讀屏軟件中隱藏元素，很不幸，你並不能如願。元素和它全部的內容會被讀屏軟件閱讀，就像網頁上的其餘元素那樣。換句話說，元素的行爲就和它們不透明時一致。

3.visibility

.hide{
    visibility:hidden; /* 佔據空間，沒法點擊 */
}複製代碼

如同 opacity 屬性，被隱藏的元素依然會對咱們的網頁佈局起做用。與 opacity 惟一不一樣的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏

4.display

.hide{
    display:none;/* 不佔據空間，沒法點擊 */
}複製代碼

經典的display隱藏元素,這個是完全的隱藏了元素，不佔據空間，也就不影響佈局，固然也沒法響應事件。

5.position

.hide{
    position：absolute;
    left:-99999px;
    top:-90999px;/* 不佔據空間，沒法點擊 */
}
.hide-2{
    position：relative;
    left:-99999px;
    top:-90999px;/* 佔據空間，沒法點擊 */
}複製代碼

假設有一個元素你想要與它交互，可是你又不想讓它影響你的網頁佈局，沒有合適的屬性能夠處理這種狀況（opacity 和 visibility 影響佈局， display 不影響佈局但又沒法直接交互——譯者注）。在這種狀況下，你只能考慮將元素移出可視區域。這個辦法既不會影響佈局，有能讓元素保持能夠操做。下采用這種辦法何嘗不可。

6.clip/clip-path

.hide{
    position:absolute;/*fixed*/
    clip:rect(top,right,bottom,left);/* 佔據空間，沒法點擊 */
}
.hide_2 {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}複製代碼

隱藏元素的另外一種方法是經過剪裁它們來實現。在之前，這能夠經過 clip 屬性來實現，可是這個屬性被廢棄了(如今瀏覽器依然支持)，換成一個更好的屬性叫作 clip-path。clip-path屬性實在是用處大大滴有，能夠很容易的實現一些複雜的圖形大漠老師分享的一個連接，該連接裏的圖形大多都是用clip-path的polygon值來實現的。但惋惜的是依舊只能在chrome40+瀏覽器裏使用.

7.z-index

.hide{
    position:absolute;
    z-index:-1000;/* 不佔據空間，沒法點擊 */
}複製代碼

經過設置z-index值使其它元素遮蓋該元素也算是一種隱藏了。

8. transform

.hide{
    transform: scale(0,0)/* 佔據空間，沒法點擊 */
}複製代碼

後記

在這篇教程裏，咱們看了 7 種不一樣的經過 CSS 隱藏元素的方法。每一種方法都與其餘幾種有一點區別。知道你想要實現什麼有助於你決定採用哪個屬性，隨着時間推移，你就能根據實際需求本能地選擇最佳方式了。若是你對於隱藏元素的這些方法還有任何問題，請在評論中留言。