資訊專欄INFORMATION COLUMN
摘要：前言說起隱藏元素我想每一個前端都能說起幾種，但能說全的我想就不是很多了。因此，元素依然存在原來的位置，占據(jù)空間也可響應事件。占據(jù)空間，無法點擊如同屬性，被隱藏的元素依然會對我們的網(wǎng)頁布局起作用。
前言
????說起隱藏元素我想每一個前端er都能說起幾種，但能說全的我想就不是很多了。博主總結(jié)了幾種隱藏元素的方法，總結(jié)如下表格：
| ? | overflow | opacity | visibility | display | position | clip(clip-path) | z-index |
|---|---|---|---|---|---|---|---|
| 屬性值 | hidden | 0 | hidden | none | absolute | rect()/inset()/polygon() | -1000 |
我們?yōu)槭裁磿枰@么多隱藏元素的方法呢，而且他們看起來實現(xiàn)的都是同樣的效果。其實每一種方法實際上都有一些細微的不同，這些不同決定了在一些特定場合下使用哪一種方法。我們下面細細探討下這些細微之處.
1. overflow.hide{
overflow:hidden; /* 占據(jù)空間，無法點擊 */
}
overflow的hidden用來隱藏元素溢出部分，占據(jù)空間，無法響應點擊事件。
2.opacity.hide{
opacity:0;/* 占據(jù)空間，可以點擊 */
}
.hide_2{
-webkit-filter:opacity(0);
filter:opacity(0);/* 占據(jù)空間，可以點擊 */
}
過濾元素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值使其它元素遮蓋該元素也算是一種隱藏了。
后記在這篇教程里，我們看了 7 種不同的通過 CSS 隱藏元素的方法。每一種方法都與其他幾種有一點區(qū)別。知道你想要實現(xiàn)什么有助于你決定采用哪一個屬性，隨著時間推移，你就能根據(jù)實際需求本能地選擇最佳方式了。如果你對于隱藏元素的這些方法還有任何問題，請在評論中留言。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111435.html
摘要：生成相對定位的元素，相對于元素本身正常位置進行定位。元素的位置通過以及屬性進行規(guī)定。因為絕對定位與文檔流無關，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過屬性控制疊放順序，越高，元素位置越靠上。頁面布局，或者是在頁面上做些小效果的時候經(jīng)常會用到 display,position和float 屬性，如果對它們不是很了解的話，很容易出現(xiàn)一些莫名其妙的效果，痛定思痛讀了《CSS Maste...
摘要：音視頻音視頻隨著互聯(lián)網(wǎng)的發(fā)展，對音視頻的需求越來越多，然而音視頻無亂是播放還是編解碼，封裝對性能要求都比較高，那現(xiàn)階段的前端再音視頻領域都能做些什么呢。 @(音視頻)[Audio|Video|MSE] 音視頻隨著互聯(lián)網(wǎng)的發(fā)展，對音視頻的需求越來越多，然而音視頻無亂是播放還是編解碼，封裝對性能要求都比較高，那現(xiàn)階段的前端再音視頻領域都能做些什么呢。 [TOC] 音頻或視頻的播放 htm...
摘要：在第一期，我們從區(qū)塊鏈的不可能三角談起，談一談如果要追求極致的效率，究竟要犧牲什么。今天，我們來介紹另一個不可能三角。這個不可能三角包括三個目標。超高吞吐率最終確認交易的平均吞吐率超過稱之為超高吞吐率。 showImg(https://segmentfault.com/img/remote/1460000018479164?w=1080&h=460);最近幾期，Conflux 計劃推出...
閱讀 1805·2021-11-18 10:02
閱讀 3531·2021-11-16 11:45
閱讀 1798·2021-09-10 10:51
閱讀 2116·2019-08-30 15:43
閱讀 1386·2019-08-30 11:23
閱讀 1494·2019-08-29 11:07
閱讀 1900·2019-08-23 17:05
閱讀 1432·2019-08-23 16:14
