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

成果如下：