ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

每日一练,整理CSS,JS前端面试题(8)

2021-10-27 10:59:51  阅读:166  来源: 互联网

标签:居中 面试题 元素 50% JS CSS


来自专栏《前端面试题》

个人主页 : https://hongweblog.blog.csdn.net

认证 : 前 端 领 域 新 星 创 作 者

微信公众号 : Dianc助手 - 前端学习路线、面试刷题

文章目录

JS来自腾讯课堂10-20,CSS来自百题其8,css的问题有概率专门出一期博文讲解(注意时间,一般三天内发出)图片大小选自X300。


前言

前端面试题这个专栏在最初的创立思想是JS的面试题,当然在后续的持续更新中,我也在想需不需要改变,后来终于在第二版中想加入CSS的面试题(Beta版本),于是乎第三版也就是本期,正式加入CSS的面试题(一道JS一道CSS,每日小练),后续版本中也会更新JQ/VUE等等其他面试题的噢,博主还在尽力学习和整理,期待你的关注。

第一题(JS)

在这里插入图片描述

解题思路

采用异步的形式async,再配合普通的for循环即可,有很多种写法,比如下面是简化的写法

<script>
	async function test(){
		for(let x of list){
			const res = await square(x)
			console.log(res)
		}
	}
</script>

第二题(CSS/3)

如何使DIV居中

这题可谓是经典了,同时也很简单,有好几种方式,都要会,并且最好能判断合适的方法。

回答

一般常见的几种居中的方法有:

对于宽高固定的元素

(1)我们可以利用margin:0auto来实现元素的水平居中。

(2)利用绝对定位,设置四个方向的值都为0,并将margin设置为auto,由于宽高固定,因此对应方向实现平分,可以实现水
平和垂直方向上的居中。

(3)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过margin负值来调整元素
的中心点到页面的中心。

(4)利用绝对定位,先将元素的左上角通过top:50%和left:50%定位到页面的中心,然后再通过translate来调整元素
的中心点到页面的中心。

(5)使用flex布局,通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对
齐,然后它的子元素也可以实现垂直和水平的居中。

对于宽高不定的元素,上面的后面两种方法,可以实现元素的垂直和水平的居中。

最后

这是根据互联网加上自己梳理的知识点,每日一小练,所以文章也会碎片化,同期还有类似PHP学习笔记的那种。如果你不喜欢看这些零散的知识点,那接下来我会收集好我写的文章再进行整理,一次性看个爽~

写在最后,如果文章有帮助到你,希望可以给个三连支持一下噢,让更多人看到这篇文章。

谢谢了你嘞!

在这里插入图片描述


来自《往期优质文章》

热门推荐

标签:居中,面试题,元素,50%,JS,CSS
来源: https://blog.csdn.net/AcssGood/article/details/120988205

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有