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

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

效果如下：