1.怎么实现垂直居中，水平居中，说出2-3种方式？
方法一：绝对定位 + left：50%，top: 50% + margin-left:(自身宽度的一半),margin-top:(自身高度的一半)
缺点：要自己计算容器的宽高，万一容器的宽高改变还要修改css样式
.parent { /*父标签*/
width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box1 {
width: 200px; height: 200px; background: skyblue;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /*自身高度的一半*/
margin-left: -100px; /*自身宽度的一半*/
}方法二：绝对定位 + left：50% ，top: 50%+ translate(-50%,-50%)
缺点：兼容性问题，必须要带上兼容性前缀。
.parent { /*父标签*/
width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box2 {
width: 200px; height: 200px; background: skyblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}方法三：绝对定位 + left: 0，right: 0, top: 0, bottom: 0 + margin：auto
.parent { /*父标签*/
width: 600px; height: 600px; border: 1px solid red; position: relative;
}
.box3 {
width: 200px; height: 200px; background: skyblue;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}方法四：弹性盒子。给父标签设置属性，display: flex; justify-content: center; align-items: center;
.parent { /*父标签*/
width: 200px;
height: 200px;
border: 1px solid red;
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
.box4 {
width: 100px;
height: 100px;
border: 1px solid red;
background: red;
}方法五：固定定位position:fixed;并设置一个较大的z-index层叠属性值。
.box5 {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px; /*自身高度的一半*/
margin-left: -100px; /*自身宽度的一半*/
z-index: 999;
}方法六：要把元素相对于视口进行居中，那么相当于父元素的高度就是视口的高度，视口的高度可以用vh来获取：
#view-child{
margin: 50vh auto 0;
transform: translateY(-50%);
}2.H5熟悉吗，H5都有哪些新增属性和新增元素？
H5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。
新增属性如下表（部分）：
| 新增属性 |
说明 |
| contextmenu |
指定右键菜单。label：菜单项显示的名称，icon：在菜单项左侧显示的图标，onclick：点击菜单项触发的事件 |
| contenteditable |
规定是否可编辑元素的内容。值：true/false/inherit |
| hidden |
用于隐藏该元素。一旦使用了此属性，则该元素就不会在浏览器中被显示。 |
| draggable |
元素是否可拖拽。值：true/false/auto |
| data-* |
让用户自定义属性的方式来存储数据。 |
| placeholder |
占位属性，规定可描述输入字段预期值的简短的提示信息。 |
| required |
约束表单元在提交前必须输入值。 |
| pattern |
正则属性，约束用户输入的值必须与正则表达式匹配。 |
| autofocus |
让指定的表单元素获得焦点。 |
| autocomplete |
自动补全属性，会记录用户输入过的内容，双击表单元素会显示历史输入。 |
| novalidate |
规定在提交表单时不应该验证 form 或 input 域。 |
| multiple |
规定输入域中可选择多个内容。 |
新增元素如下表：
| 新增元素 | 说明 |
|---|---|
| <article> | 定义一个文章区域。 |
| <aside> | 定义 <article> 标签外的内容。aside 的内容应该与附近的内容相关。 |
| <audio> | 定义声音，比如音乐或其他音频流。 |
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <canvas> | 通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。 |
| <command> | 可以定义用户可能调用的命令（比如单选按钮、复选框或按钮）。 |
| <datalist> | 规定了 <input> 元素可能的选项列表。 |
| <dialog> | 定义一个对话框、确认框或窗口。 |
| <embed> | 定义了一个容器，用来嵌入外部应用或者互动程序（插件）。 |
| <figcaption> | 为 <figure> 元素定义标题。 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <footer> | 定义文档或者文档的一部分区域的页脚。 |
| <header> | 定义文档或者文档的一部分区域的页眉。 |
| <keygen> | 规定用于表单的密钥对生成器字段。 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义导航链接的部分。 |
| <output> | 作为计算结果输出显示(比如执行脚本的输出)。 |
| <progress> | 定义运行中的任务进度（进程）。 |
| <rp> | 在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。 |
| <rt> | 定义字符（中文注音或字符）的解释或发音。 |
| <ruby> | 定义 ruby 注释（中文注音或字符）。 |
| <section> | 定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。 |
| <source> | 为媒体元素（比如 <video> 和 <audio>）定义媒体资源。 |
| <summary> | 为 <details> 元素定义一个可见的标题。 当用户点击标题时会显示出详细信息。 |
| <time> | 定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。 |
| <track> | 为媒体元素（比如 <audio> and <video>）规定外部文本轨道。 |
| <video> | 定义视频，比如电影片段或其他视频流。 |
| <wbr> | (Word Break Opportunity) 标签规定在文本中的何处适合添加换行符。 |
3.说一下都有哪些本地存储方式，区别是什么？
- Cookie
可以自定义生存周期，生成是指定一个maxAge值，在这个生存周期内Cookie有效。存储数据大小在4K左右，前后端都可以访问。
- localStorage
只要不是手动清除，它就会一直将数据存储在客户端，即使关闭了浏览器也一直存在，属于本地持久存储，一般用于存储一些用户偏好。存储数据大小一般在5M左右（浏览器不同，大小不同）。
- sessionStorage
页面会话期间，一旦关闭浏览器，数据就会消失。存储数据大小一般在5M左右（浏览器不同，大小不同）。
共同点：都是保存在浏览器端。
4.说一些你遇到过的解决兼容的问题
- 双倍边距问题
浮动后的元素在IE浏览器下出现横向双倍边距，解决办法就是设置margin-left负值。
例如：几个div，float: left; margin-left: 10px;，把第一个div再设置margin-left: -10px;
- 图片1px边框问题
给图片设置border: 0;
- 透明度问题
设置opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
（文章自己编写，如有发现问题请提出改正，谢谢）