前端面试题 每日10题（持续更新）

1、父元素和子元素宽高不固定，如何实现水平垂直居中?

方式1 

        父元素  display: flex;   justify-content: center;   align-items: center;

方式2

        父元素 display: flex; 

        子元素 margin: auto;

方式3

        父元素  position: relative;

        子元素  position:  absolute; 

                     top: 50%;  left: 50%;   

                     tranform: tarnslate(-50%,  -50%)   // 移动距离是元素宽(高)*百分比

 2、HTML5有哪些新特性？

（1）语义化标签

       header、main、footer、nav、article、aside、section

（2）媒体标签

        audio音频、vedio视频

（3）canvas绘图  .....

（4）地理定位

（5）web存储（webStorage：sessionStorage、localStorage）和离线应用程序

优势：对本地离线存储有更好地支持

          方便SEO蜘蛛的爬行

          方便后期更新和维护

3、px、em、rem、vh的区别？

px(像素)：页面默认尺寸计算单位，绝对长度，相对屏幕分辨率

em： 基于父元素文字大小的单位

rem :   相对长度，相对于根元素html字体大小的单位，

         当html设置font-size: 20px时，则1rem = 20px

vh： 视口高度单位

        视口是浏览器中用于呈现网页的区域

        1vh等于视口高度1%

vw:   视口宽度单位

通常给font-size设置为62.5%，浏览器默认16px，62.5%则为10px，方便后面rem单位换算

4、移动端适配方案

方案一：百分比布局

        使用 % 定义 宽度，高度用px固定，通常使用 max-width/min-width 控制尺寸范围过大或者过小；

方案二：使用rem单位（html根元素字体大小的倍数）

        根据屏幕宽度设置根元素html的font-size大小，布局时使用rem单位，达到自适应目的，是弹性布局的一种实现方式；

方案三：使用vw和vh单位

        使用 css 预处理器把设计稿尺寸转换为 vw 单位，包括 文本，布局高宽，间距 等，使得这些元素能够随视口大小自适应调整

5、说说对transition的了解，transition与animation的区别？

transition是过渡属性，需要触发(比如鼠标移上去、鼠标点击等事件触发)，并且只有开始和结束两个关键帧；

animation是动画属性，不需触发，可以设置好时间自动开始，并可设置多个关键帧（用@keyframe定义）完成动画

      属性： 动画名 执行时间  延迟时间  变化的曲线  执行次数  执行方向

6、  CSS清除浮动的几种方式？

方案1  在浮动元素后添加一个空div   设置其样式 { clear: both }

方案2  给父元素添加overflow: hidden; （会触发BFC，不推荐使用）

方案3  使用伪元素 ::after 清除浮动

.clear::after {
    display: block;
    content: ' ';   //必须有content,伪元素才会起效果
    clear: both;
    height: 0;    //处理兼容性问题
}

7、为什么要初始化css样式？

避免浏览器的兼容性问题，

每个浏览器都有其默认样式，若不初始化css，则页面在不同浏览器之间会展示不一致，在不同设备上也可能出现问题。

css初始化指重设浏览器样式，最简单的方法为  *{ padding: 0;  margin: 0;  }

8、 css3中的选择器有哪些？

1、基础选择器

        通用选择器( * ) 、标签选择器、类选择器、id选择器

2、层级选择器

        后代 ul li        父子 ul>li

3、css3新增选择器

        属性选择器    例：选择所有具有 'data-type'属性的元素 [data-type] { ... }

        结构伪类选择器  例：选择第一个元素  e: first-child

        目标伪类选择器  例：选中成为目标的元素e    e:target（锚点链接跳转目标）

9、本地存储和Cookies之间的区别是什么？

（1） localStorage  生命周期是永久性的，存储在硬盘中，页面刷新、关闭浏览器或操作系统重启，数据也不会被清空，需要主动去销毁（或调用clear方法），它还可以跨窗口传递数据，大小限制为5M左右。

（2）sessionStorage  生命周期为浏览器页面关闭，数据就会清除，存储在内存中。大小限制为5M左右

（3）cookie  生命周期是可控的，存储在客户端的纯文本文件，如txt文件，可以设置过期时间，若不设置，则关闭浏览器数据就销毁，大小限制为4KB左右。

10、重排（reflow）与重绘（repaint）

重排

        也称回流，是浏览器为了重新渲染部分或整个页面，重新计算页面元素位置和几何结构的进程；

        任何页面布局和几何属性的改变都会触发重排。每个页面至少有一次重排，就是在页面第一次加载时，

重绘

        是一个元素的外观被改变，但没有改变布局的情况下发生的，如改变了visibility、outline、background等。

重排必定引起重绘，重绘不一定会引发重排。