前言
總括：本文詳細講述了在網(wǎng)頁中用CSS隱藏元素的七種方法殖妇。
- 原文博客地址：從隱藏元素談起
- 知乎專欄&&簡書專題：前端進擊者（知乎）&&前端進擊者（簡書）
- 博主博客地址：Damonare的個人博客
念念不忘,必有回響;有一口氣,點一盞燈唯鸭。
正文
說起隱藏元素我想每一個前端er都能說起幾種骂租，但能說全的我想就不是很多了摘符。博主總結(jié)了幾種隱藏元素的方法，總結(jié)如下：
overflow:hiddenopacity:0哟冬；visibility:hiddendisplay:noneposition:absoluteclip(clip-path):rect()/inset()/polygon()z-index:-1000transform:scaleY(0)
我們?yōu)槭裁磿枰@么多隱藏元素的方法呢念赶，而且他們看起來實現(xiàn)的都是同樣的效果。其實每一種方法實際上都有一些細微的不同怖竭，這些不同決定了在一些特定場合下使用哪一種方法锥债。我們下面細細探討下這些細微之處.
1. overflow
.hide{ opacity:0;/* 占據(jù)空間，可以點擊 */}.hide_2{ -webkit-filter:opacity(0); filter:opacity(0);/* 占據(jù)空間，可以點擊 */}
overflow的hidden用來隱藏元素溢出部分赞弥，占據(jù)空間毅整，無法響應點擊事件。
2.opacity
過濾元素filter也可使用opacity值設置透明度绽左，不過filter現(xiàn)在的兼容性不好悼嫉，只支持webkit內(nèi)核，這里順帶一提拼窥。
opacity是用來設置元素透明度的戏蔑，但當設置成0的時候也就相當于隱藏元素了。因此鲁纠，元素依然存在原來的位置总棵，占據(jù)空間也可響應事件。如果你打算使用 opacity 屬性在讀屏軟件中隱藏元素改含，很不幸情龄，你并不能如愿。元素和它所有的內(nèi)容會被讀屏軟件閱讀捍壤，就像網(wǎng)頁上的其他元素那樣骤视。換句話說，元素的行為就和它們不透明時一致鹃觉。
3.visibility
.hide{ visibility:hidden; /* 占據(jù)空間专酗，無法點擊 */}
如同 opacity 屬性，被隱藏的元素依然會對我們的網(wǎng)頁布局起作用盗扇。與 opacity 唯一不同的是它不會響應任何用戶交互祷肯。此外，元素在讀屏軟件中也會被隱藏
4.display
.hide{ display:none;/* 不占據(jù)空間疗隶，無法點擊 */}
經(jīng)典的display隱藏元素,這個是徹底的隱藏了元素佑笋，不占據(jù)空間，也就不影響布局斑鼻，當然也無法響應事件蒋纬。
5.position
.hide{ position：absolute; left:-99999px; top:-90999px;/* 不占據(jù)空間，無法點擊 */}.hide-2{ position：relative; left:-99999px; top:-90999px;/* 占據(jù)空間卵沉，無法點擊 */}
假設有一個元素你想要與它交互，但是你又不想讓它影響你的網(wǎng)頁布局法牲，沒有合適的屬性可以處理這種情況（opacity 和 visibility 影響布局史汗， display 不影響布局但又無法直接交互——譯者注）。在這種情況下拒垃，你只能考慮將元素移出可視區(qū)域停撞。這個辦法既不會影響布局，有能讓元素保持可以操作。下采用這種辦法未嘗不可戈毒。
6.clip/clip-path
.hide{ position:absolute;/*fixed*/ clip:rect(top,right,bottom,left);/* 占據(jù)空間艰猬，無法點擊 */}.hide_2 { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);}
隱藏元素的另一種方法是通過剪裁它們來實現(xiàn)。在以前埋市，這可以通過 clip 屬性來實現(xiàn)冠桃，但是這個屬性被廢棄了(現(xiàn)在瀏覽器依然支持)，換成一個更好的屬性叫做 clip-path道宅。clip-path屬性實在是用處大大滴有食听，可以很容易的實現(xiàn)一些復雜的圖形大漠老師分享的一個鏈接，該鏈接里的圖形大多都是用clip-path的polygon值來實現(xiàn)的污茵。但可惜的是依舊只能在chrome40+瀏覽器里使用.
7.z-index
.hide{ position:absolute; z-index:-1000;/* 不占據(jù)空間樱报，無法點擊 */}
通過設置z-index值使其它元素遮蓋該元素也算是一種隱藏了。
-
transform
.hide{ transform: scale(0,0)/* 占據(jù)空間泞当，無法點擊 */}
后記
在這篇教程里迹蛤，我們看了 7 種不同的通過 CSS 隱藏元素的方法。每一種方法都與其他幾種有一點區(qū)別襟士。知道你想要實現(xiàn)什么有助于你決定采用哪一個屬性盗飒，隨著時間推移，你就能根據(jù)實際需求本能地選擇最佳方式了敌蜂。如果你對于隱藏元素的這些方法還有任何問題箩兽，請在評論中留言。
