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

时间:2021-7-3 作者:qvyue

标题:(前端)面试300问之(4)页面元素隐藏的10种方式

一 问题

1 如何将页面上的元素进行隐藏?

2 问题分析

1)所谓隐藏,就是让用户不可见该页面元素即可。
2)没有限制任何的方式,所以我们需发散思维、从各个角度对该问题提出不同的解法。
3)我们可以从几何空间、视觉(颜色)、visibility、display,大致可分为3大类、10小类,对应的思维导图如下:
(前端)面试300问之(4)页面元素隐藏的10种方式
页面元素的隐藏方式(共10小种).png

二 具体解法

0 前言

1)以下所有解法的 CSS样式 + DOM结构 均如下:
.main {
    width: 500px;
    background-color: lightskyblue;
}

正常显示的元素,by 码农三少

1 几何空间

1)子的width、height同时设为0,父亲设overflow: hidden
.main {
    // 很核心、很关键!!
    overflow: hidden;
}
.hidden {
    // 其实这里只要将 height:0 即可
    width: 0;
    height: 0;
}

效果如下:

(前端)面试300问之(4)页面元素隐藏的10种方式
image
2)子transform: scale(0)
.hidden {
    transform: scale(0);
}

效果如下:

(前端)面试300问之(4)页面元素隐藏的10种方式
image
3)子scale:0 [存在IE兼容性问题]
.hidden {
    clip-path: circle(0); 
}

效果如下:

(前端)面试300问之(4)页面元素隐藏的10种方式
image

2 位置移动

1)子定位,如 position: fixed、absolute 等
.hidden {
    position: fixed;
    top: -10000px;
}

或

.main {
    position: relative;
}

.hidden {
    position: absolute;
    top: -10000px;
}

效果如下(2种方式效果均一致~):

(前端)面试300问之(4)页面元素隐藏的10种方式
image
2)子z-index设为负数[需结合position使用,只是“在父区域不可见”!]
.hidden {
    position: fixed;
    z-index: -100000;
}

效果如下:

(前端)面试300问之(4)页面元素隐藏的10种方式
image

3 视觉(色彩)

1)设为透明色 color: transparent
.hidden {
    color: transparent 
}

效果如下:

(前端)面试300问之(4)页面元素隐藏的10种方式
image
2)透明度opacity: 0
.hidden {
    opacity: 0;
}

效果如下:

(前端)面试300问之(4)页面元素隐藏的10种方式
image
3)color设为父容器的背景色
.hidden {
    // 跟 父的背景色 一致
    color: lightskyblue;
}

效果如下:

(前端)面试300问之(4)页面元素隐藏的10种方式
image

4 常用的CSS隐藏方式

1)visibility设为hidden
.hidden {
    visibility: hidden;
}

效果如下:

(前端)面试300问之(4)页面元素隐藏的10种方式
image
2)display设为none
.hidden {
    display: none;
}

效果如下:

(前端)面试300问之(4)页面元素隐藏的10种方式
image

三 更多

1 本人是20届本科生,大厂、创业公司都待过,现在是BAT的1名前端工程师(目前正往“全栈”方向发展,已开始写公司里的部分Go后端代码~)。

2 以下是个人整理的一些笔记和书籍(永久有效链接: https://pan.baidu.com/s/1SPc3umO6cZlBtoPylSaHzw 密码: eqee ,若失效的话可以 私信 发送 pdf 以进行最新资料的获取):

(前端)面试300问之(4)页面元素隐藏的10种方式
个人技术笔记(350+算法题解、前端重点面经汇总、图解HTTP等).png
(前端)面试300问之(4)页面元素隐藏的10种方式
理财书籍pdf.png
(前端)面试300问之(4)页面元素隐藏的10种方式
技术书籍pdf.png
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。