1.如何让一个盒子水平居中？
例子：如何让box1 中的内容123456 和 盒子 box2 在盒子 box1 内居中显示？
<body>
<div class="box1">
123456
<div class="box2">789</div>
</div>
</body>解决办法：style 样式编辑如下
方法一：
给盒子box1 的样式 添加 display:flex; 属性， justify-content:center; align-items:center;
这样是连同box1 中的所有内容 垂直水平居中
<style>
html,
body {
margin: 0;
width: 100%;
}
.box1 {
width: 500px;
height: 500px;
border: 1px solid green;
display: flex;
justify-content: center;
align-items: center;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
}
</style>效果：
方法二：
这种方法是利用子绝父相，父盒子box1 相对定位， 子盒子 box2 绝对定位。然后盒子移动盒子水平和垂直的一半，然后在移动自身宽度和高度的-50%
body {
margin: 0;
width: 100%;
}
.box1 {
width: 500px;
height: 500px;
border: 1px solid green;
position: relative;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>效果：
需要注意的是：这种方式只能让父盒子内的盒子居中对齐，但是没办让父盒子 box1 中的 内容垂直水平居中
2.写一个左中右布局占满屏幕，其中左右两块是固定宽度200 ，中间自适应宽，要求先加载中间块
方法一
分析原理： 左边 和 右边 的盒子 用position绝对定位 ，中间 margin 上下0 左右200px
<body>
<div id="left">我是左边</div>
<div id="center">我是中间</div>
<div id="right">我是右边</div>
</body><style>
html,
body {
margin: 0;
width: 100%;
}
#left,
#right {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
}
#left {left: 0;top: 0;}
#right {right: 0;top: 0;}
#center {
margin: 0 200px;
background-color: blue;
height: 200px;
}
</style>方法二：
3.清楚浮动的方式
a.给父盒子添加 height
b.给父盒子添加 overflow:hidden;
c.结尾处在空div 标签 clear:both
4. Javascript中的定时器有哪些？他们的区别及用法是什么？
a.setTimeout 只执行一次
b.setInterval 一直执行
5.请描述一下 cookies sessionStorage和localstorage区别？
相同点：都存储在客户端
不同a.存储大小
· cookie数据大小不能超过4k。
· sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到 5M或更b.有效时间
· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
· sessionStorage 数据在当前浏览器窗口关闭后自动删除。
· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
c. 数据与服务器之间的交互方式
· cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
· sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
7. 说一下宏任务和微任务？
宏任务：当前调用栈中执行的任务称为宏任务。（主代码快，定时器等等）。
微任务： 当前（此次事件循环中）宏任务执行完，在下一个宏任务开始之前需要执行的任务为微任务。（可以理解为回调事件，promise.then，proness.nextTick等等）。
宏任务中的事件放在callback queue中，由事件触发线程维护；微任务的事件放在微任务队列中，由js引擎线程维护。
8.说一下继承的几种方式及优缺点？
- 借用构造函数（类式继承）
借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。
- 原型继承，将子对象的prototype指向父对象的一个实例。
缺点：字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。
- 组合式继承
组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。
9.说一下闭包？
闭包的实质是因为函数嵌套而形成的作用域链
闭包的定义即：函数 A 内部有一个函数 B，函数 B 可以访问到函数 A 中的变量，那么函数 B 就是闭包
10.export和export default的区别？
使用上的不同
export default xxx
import xxx from './'
export xxx
import {xxx} from './'11.什么是会话cookie,什么是持久cookie?
cookie是服务器返回的，指定了expire time（有效期）的是持久cookie
没有指定的是会话cookie
12.css水平、垂直居中的写法，请至少写出4种？
水平居中
- 行内元素:
text-align: center - 块级元素:
margin: 0 auto - position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center
垂直居中
- 设置line-height 等于height
- position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center- display:table+display:table-cell + vertical-align: middle;