前台开发常见笔试/面试题总结 ——HTML / CSS篇
校招和社招时频繁遇到的面试题
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篇