前台开发常见笔试/面试题总结 ——HTML / CSS篇

作者 : 开心源码 本文共1517个字,预计阅读时间需要4分钟 发布时间: 2022-05-13 共166人阅读

校招和社招时频繁遇到的面试题

iframe 有哪些缺点?

页面看起来较杂乱,不易管理,布局不佳,易分散客户注意力

不利于搜索引擎的优化

移动设施兼容性差

会添加http请求,对服务器造成负担

cookie和localStorage、seesionStorage的区别是什么?

共同点是都保存在浏览器端,区别如下:

cookies是为了标识客户身份而存储在本地的数据,会随http请求一同发送到服务器,而localStorage和sessionStorage仅在本地保存,不会自动把数据发给服务器

cookie保存的数据不超过4k,而localStorage和sessionStorage保存的数据可达到5M

cookie在过期之前一直有效,即便窗口或者者浏览器关闭。localStorage始终有效,窗口和浏览器关闭也一直保存,用作长久数据保存,sessionStorage仅在浏览器窗口关闭之前有效。

cookie数据在所有同源窗口都共享。localStorage也是在所有同源窗口都共享,而sessionStorage不在不同的浏览器共享,即便同一页面

多个标签页如何实现通信?

localStorage:在window全局对象上增加监听事件 window.onstorage = (e) => { console.log(e); }

webSocket协议

SharedWorker:webWorker只针对当前页面,而SharedWorker则是多个标签共享的worker

HTML5如何实现文件离线储存?

在head中加入manifest属性,它会请求manifest文件,第一次访问时,浏览器会根据manifest文件的内容下载相应的资源,并进行离线存储。假如已经访问过并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面。

实现不使用 border 画出 1px 高的线

为了在不同浏览器的标准模式与怪异模式下都能保持一致,可用以下方法:

1、使用div

<div style=”width: 100%; height: 1px; background-color: black” />

2、使用hr,不建议直接使用size属性,由于新的标准里已经废弃直接使用标准的方式

<hr style=”height: 1px” />

如何实现垂直居中?

绝对定位:

main {

? ? ? position: absolute;

? ? ? top: 50%;

? ? ? left: 50%;

? ? ? transform: translate( -50%, -50% );

? }

flexbox布局:display: flex, justify-content: center, align-items:center

box布局,box-align:center; box-pack:center

什么是标准模式和怪异模式?如何应对?

标准模式又称严格模式,浏览器使用 W3C 的标准解析渲染页面

怪异模式又称混杂模式,浏览器都按照自己的方式解析渲染页面,在不同的浏览器网页会显示不同的样式

最好的方法就是增加了文档类型公告,比方<!DOCTYPE html>,浏览器会用W3C的标准来渲染网页

如何处理两个元素的重叠问题(外边距合并)?

外边距合并(叠加):当两个垂直(不包含水平)外边距相遇时,它们将形成一个外边距。合并后的外边距的高度取外边距高度中的较大者。

一上一下会合并;

一内一外也会合并;

自身(没有边框或者填充时)的margin-top和margin-bottom也会合并

方法:可以用BFC的方式处理

在页面上实现一个圆形的可点击区域

SVG方式:同理相似的用<area>的方式也可以

CSS方式:border-radius: 50%

JS方式:先绘制一个正方形,js检测鼠标位置能否在圆上

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台开发常见笔试/面试题总结 ——HTML / CSS篇

发表回复