前端开发常见笔试/面试题总结 ——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
2、使用hr,不建议直接使用size属性,因为新的标准里已经废弃直接使用标准的方式
如何实现垂直居中?

绝对定位:
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方式:同理类似的用的方式也可以
CSS方式:border-radius: 50%
JS方式:先绘制一个正方形,js检测鼠标位置是否在圆上

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值