標(biāo)題：（前端）面試300問(wèn)之（4）頁(yè)面元素隱藏的10種方式
一 問(wèn)題
1 如何將頁(yè)面上的元素進(jìn)行隱藏帆竹？
2 問(wèn)題分析
1）所謂隱藏，就是讓用戶不可見(jiàn)該頁(yè)面元素即可慕趴。
2）沒(méi)有限制任何的方式，所以我們需發(fā)散思維、從各個(gè)角度對(duì)該問(wèn)題提出不同的解法葱淳。
3）我們可以從幾何空間、視覺(jué)（顏色）抛姑、visibility赞厕、display，大致可分為3大類定硝、10小類皿桑，對(duì)應(yīng)的思維導(dǎo)圖如下：
頁(yè)面元素的隱藏方式（共10小種）.png
二 具體解法
0 前言
1）以下所有解法的 CSS樣式 + DOM結(jié)構(gòu) 均如下：
.main {
width: 500px;
background-color: lightskyblue;
}
<div class="main">
<div class="visible">正常顯示的元素，by 碼農(nóng)三少</div>
<div class="hidden">被隱藏的元素蔬啡，by 碼農(nóng)三少</div>
</div>
1 幾何空間
1）子的width诲侮、height同時(shí)設(shè)為0，父親設(shè)overflow: hidden
.main {
// 很核心箱蟆、很關(guān)鍵９敌鳌！
overflow: hidden;
}
.hidden {
// 其實(shí)這里只要將 height:0 即可
width: 0;
height: 0;
}
效果如下：
image
2）子transform: scale(0)
.hidden {
transform: scale(0);
}
效果如下：
image
3）子scale：0 [存在IE兼容性問(wèn)題]
.hidden {
clip-path: circle(0);
}
效果如下：
image
2 位置移動(dòng)
1）子定位空猜，如 position: fixed绽慈、absolute 等
.hidden {
position: fixed;
top: -10000px;
}
或
.main {
position: relative;
}
.hidden {
position: absolute;
top: -10000px;
}
效果如下（2種方式效果均一致~）：
image
2）子z-index設(shè)為負(fù)數(shù)[需結(jié)合position使用，只是“在父區(qū)域不可見(jiàn)”辈毯！]
.hidden {
position: fixed;
z-index: -100000;
}
效果如下：
image
3 視覺(jué)(色彩)
1）設(shè)為透明色 color: transparent
.hidden {
color: transparent
}
效果如下：
image
2）透明度opacity: 0
.hidden {
opacity: 0;
}
效果如下：
image
3）color設(shè)為父容器的背景色
.hidden {
// 跟 父的背景色 一致
color: lightskyblue;
}
效果如下：
image
4 常用的CSS隱藏方式
1）visibility設(shè)為hidden
.hidden {
visibility: hidden;
}
效果如下：
image
2）display設(shè)為none
.hidden {
display: none;
}
效果如下：
image
三 更多
1 本人是20屆本科生坝疼，大廠、創(chuàng)業(yè)公司都待過(guò)漓摩，現(xiàn)在是BAT的1名前端工程師(目前正往“全椚故浚”方向發(fā)展，已開(kāi)始寫(xiě)公司里的部分Go后端代碼~)管毙。
2 以下是個(gè)人整理的一些筆記和書(shū)籍（永久有效鏈接: https://pan.baidu.com/s/1SPc3umO6cZlBtoPylSaHzw 密碼: eqee 腿椎，若失效的話可以 私信 發(fā)送 pdf 以進(jìn)行最新資料的獲茸懒颉）：
個(gè)人技術(shù)筆記(350+算法題解、前端重點(diǎn)面經(jīng)匯總啃炸、圖解HTTP等).png
理財(cái)書(shū)籍pdf.png
技術(shù)書(shū)籍pdf.png
