2022【前端面试】前端面试题【含答案】最全面试题

前端开发与性能优化：CSS居中技巧、浮动解决方案与数组去重

原创

已于 2022-03-25 09:06:22 修改 · 5.3k 阅读

43 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #面试 #css #html #javascript

于 2022-03-18 16:51:52 首次发布

本文详细介绍了前端开发中的几个关键概念：如何使用CSS实现200*200div的居中布局，浮动的常见解决方案，CSS Sprites的原理和优势，以及cookies、sessionStorage和localStorage的区别。同时，文章涵盖了JavaScript数组去重的方法，深入探讨了数据类型的差异，特别是undefined和null的区别。此外，还讨论了HTTP和HTTPS的区别、网站性能优化策略、MVVM与MVC模式的对比，以及闭包的使用和内存管理。最后，文章提到了Vue2与Vue3的区别以及JavaScript中导致内存泄露的操作。

1. **一个200*200的div在不同分辨率屏幕上下左右居中，用css实现**

这里主要是靠flex布局实现的，这个是重点

display:flex;
justify-content:center;
align-items:center;

<div>
  <div style="">
    上下左右居中
  </div>
</div>

css

div{
    width:500px;
    height:500px;
    border:1px solid red;
    display:flex;
    justify-content:center;
    align-items:center;
}

-----------------------------------------------------------------------------------------------------------------------------

2，阐述清楚浮动的几种方式（常见问题）

这个问题很常见，经常问到务必记住！！！

1.父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2.父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好

4. 结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

-----------------------------------------------------------------------------------------------------------------------------

3. 解释css sprites ，如何使用？

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

优点：CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片，提高了性能

-----------------------------------------------------------------------------------------------------------------------------