（前端）面试 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;}

成果如下：