（前端）面试300问之（4）页面元素暗藏的10种形式

一 问题

1 如何将页面上的元素进行暗藏？

2 问题剖析

1）所谓暗藏，就是让用户不可见该页面元素即可。

2）没有限度任何的形式，所以咱们需发散思维、从各个角度对该问题提出不同的解法。

3）咱们能够从几何空间、视觉（色彩）、visibility、display，大抵可分为3大类、10小类，对应的思维导图如下：

二 具体解法

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;}

成果如下：

2）子transform: scale(0)

.hidden {    transform: scale(0);}

成果如下：

3）子scale：0 [存在IE兼容性问题]

.hidden {    clip-path: circle(0); }

成果如下：

2 地位挪动

1）子定位，如 position: fixed、absolute 等

.hidden {    position: fixed;    top: -10000px;}或.main {    position: relative;}.hidden {    position: absolute;    top: -10000px;}

成果如下（2种形式成果均统一~）：

2）子z-index设为正数[需联合position应用，只是“在父区域不可见”！]

.hidden {    position: fixed;    z-index: -100000;}

成果如下：

3 视觉(色调)

1）设为通明色 color: transparent

.hidden {    color: transparent }

成果如下：

2）透明度opacity: 0

.hidden {    opacity: 0;}

成果如下：

3）color设为父容器的背景色

.hidden {    // 跟 父的背景色 统一    color: lightskyblue;}

成果如下：

4 罕用的CSS暗藏形式

1）visibility设为hidden

.hidden {    visibility: hidden;}

成果如下：

2）display设为none

.hidden {    display: none;}

成果如下：