校招和社招时频繁遇到的面试题
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
如何实现垂直居中？
绝对定位： 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检测鼠标位置是否在圆上
