前同事离职，目前正在面试新的前端。从网上整理了一组面试题1.如何实现垂直居中，水平居中，说2-3种方式？方法一：绝对定位+left:50%,top:50%+margin-left:(自身宽度的一半),margin-top:(自身高度的一半)缺点：需要计算宽高容器自己，以防容器改变css的宽高style.parent{/*父标签*/width:600px;高度：600px；边框：1px纯红色；位置：相对；}.box1{宽度：200px；高度：200px；背景：天蓝色；位置：绝对；顶部：50%；左：50%；边距顶部：-100px；/*自身高度的一半*/margin-left:-100px;/*自身宽度的一半*/}方法二：绝对定位+left:50%,top:50%+translate(-50%,-50%)缺点：兼容性问题，必须加上compatibility前缀。.parent{/*父标签*/width:600px;高度：600px；边框：1px纯红色；位置：相对；}.box2{宽度：200px；高度：200px；背景：天蓝色；位置：绝对；顶部：50%；左：50%；transform:translate(-50%,-50%);}方法三：绝对定位+left:0,right:0,top:0,bottom:0+margin:auto.parent{/*父标签*/width:600像素；高度：600px；边框：1px纯红色；位置：相对；}.box3{宽度：200px；高度：200px；背景：天蓝色；位置：绝对；顶部：0；底部：0；左：0；右：0；margin:auto;}方法四：弹框。为父标签设置属性，显示：flex；证明内容：居中；对齐项目：居中；.parent{/*父标签*/width:200px;高度：200px；边框：1px纯红色；显示：弹性；证明-内容：中心；/*水平居中*/align-items:center;/*垂直居中*/}.box4{width:100px;高度：100px；边框：1px纯红色；背景：红色；方法五：固定位置position:fixed;并设置更大的z-index级联属性值。.box5{位置：固定；顶部：50%；左：50%；边距顶部：-100px；/*自身高度的一半*/margin-left:-100px;/*自身宽度的一半*/z-index:999;}方法六：让元素相对于视口居中，相当于父元素的高度就是视口的高度，视口的高度可以是通过vh获得：#view-child{margin:50vhauto0;变换：翻译Y(-50%)；}2.你熟悉H5吗，H5有哪些新的属性和元素？H5是html的最新版本，由w3c于2014年制定。增强，浏览器的原生功能，减少浏览器插件（如：flash）的应用，提高用户体验满意度，让开发更方便。3.说说本地存储方式，有什么区别？Cookie可以自定义生命周期。生成就是指定一个maxAge值，cookie在这个生命周期内是有效的。存储数据大小约为4K，前后端均可访问。只要不手动清除localStorage，它就会一直在客户端存储数据，即使浏览器关闭。属于本地持久化存储，一般用于存储一些用户偏好。存储数据的大小一般在5M左右（不同浏览器大小不同）。sessionStorage在页面会话期间，一旦浏览器关闭，数据就会消失。存储数据的大小一般在5M左右（不同浏览器大小不同）。它们的共同点：都是保存在浏览器端。4.说说你遇到的一些解决doublemargin问题的兼容问题。浮动元素在IE浏览器中有水平双边距。解决办法是给margin-left设置一个负值。比如：几个div，float:left;margin-left:10px;,为第一个div设置margin-left:-10px；setborder:0用于有1px边框问题的图片；设置不透明度：0.5；透明度问题的过滤器：alpha(opacity=50);过滤器：progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
