之前的共事到职了，目前在面试新的前端，从网上整顿一套面试题进去
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）的利用，进步用户体验满意度，让开发更加不便。
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);