标题：（前端）面试300问之（4）页面元素隐藏的10种方式
一 问题
1 如何将页面上的元素进行隐藏？
2 问题分析
1）所谓隐藏，就是让用户不可见该页面元素即可。
2）没有限制任何的方式，所以我们需发散思维、从各个角度对该问题提出不同的解法。
3）我们可以从几何空间、视觉（颜色）、visibility、display，大致可分为3大类、10小类，对应的思维导图如下：
页面元素的隐藏方式（共10小种）.png
二 具体解法
0 前言
1）以下所有解法的 CSS样式 + DOM结构 均如下：
.main {
width: 500px;
background-color: lightskyblue;
}
<div class="main">
<div class="visible">正常显示的元素，by 码农三少</div>
<div class="hidden">被隐藏的元素，by 码农三少</div>
</div>
1 几何空间
1）子的width、height同时设为0，父亲设overflow: hidden
.main {
// 很核心、很关键！！
overflow: hidden;
}
.hidden {
// 其实这里只要将 height:0 即可
width: 0;
height: 0;
}
效果如下：
image
2）子transform: scale(0)
.hidden {
transform: scale(0);
}
效果如下：
image
3）子scale：0 [存在IE兼容性问题]
.hidden {
clip-path: circle(0);
}
效果如下：
image
2 位置移动
1）子定位，如 position: fixed、absolute 等
.hidden {
position: fixed;
top: -10000px;
}
或
.main {
position: relative;
}
.hidden {
position: absolute;
top: -10000px;
}
效果如下（2种方式效果均一致~）：
image
2）子z-index设为负数[需结合position使用，只是“在父区域不可见”！]
.hidden {
position: fixed;
z-index: -100000;
}
效果如下：
image
3 视觉(色彩)
1）设为透明色 color: transparent
.hidden {
color: transparent
}
效果如下：
image
2）透明度opacity: 0
.hidden {
opacity: 0;
}
效果如下：
image
3）color设为父容器的背景色
.hidden {
// 跟 父的背景色 一致
color: lightskyblue;
}
效果如下：
image
4 常用的CSS隐藏方式
1）visibility设为hidden
.hidden {
visibility: hidden;
}
效果如下：
image
2）display设为none
.hidden {
display: none;
}
效果如下：
image
三 更多
1 本人是20届本科生，大厂、创业公司都待过，现在是BAT的1名前端工程师(目前正往“全栈”方向发展，已开始写公司里的部分Go后端代码~)。
2 以下是个人整理的一些笔记和书籍（永久有效链接: https://pan.baidu.com/s/1SPc3umO6cZlBtoPylSaHzw 密码: eqee ，若失效的话可以 私信 发送 pdf 以进行最新资料的获取）：
个人技术笔记(350+算法题解、前端重点面经汇总、图解HTTP等).png
理财书籍pdf.png
技术书籍pdf.png
