1. 元素水平垂直居中的方式有哪些？如果元素不定宽高呢？

第一种：绝对定位 + transform

通过设置父盒子相对定位，子盒子绝对定位并 top 和 left 距离 50%，实现了子盒子左上角点居中，再通过 transform: translate(-50%, -50%); 属性来实现子盒子的中心点居中
```
.parent {
  position: relative;
}
.children {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
```

注意：需要添加浏览器前缀进行兼容

第二种：绝对定位 + margin
1. 不用知道子盒子的宽高
  
  通过设置父盒子相对定位，子盒子绝对定位，top、right、bottom、left 均为 0，再通过 margin: auto; 属性来实现子盒子的水平垂直居中
```
.parent {
  position: relative;
}
.children {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
```
1. 需要知道子盒子的宽高
  
  通过设置父盒子相对定位，子盒子绝对定位并 top 和 left 距离 50%，实现了子盒子右上角居中，然后利用 margin-top 和 margin-left 属性等于盒子的负宽高，来实现子盒子的中心点居中
```
.parent {
  position: relative;
}
.children {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -200px;
}
```
第三种：table-cell 属性

通过设置子盒子为 display: table-cell; 显示类型，并分别通过 text-align: center; 和 vertical-align: middle; 实现了子盒子内的文本水平垂直居中
```
.children {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
```

注意：水平垂直居中的是盒子中的文本段落

第四种：flex 布局

通过设置父盒子为 display: display; 显示类型，并分别通过 justify-content: center; 和 align-items: center; 实现父盒子中的主轴、交叉轴居中，从而让子盒子水平垂直居中
```
.parents {
  display: flex;
  -webkit-display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  align-items: center;
  -webkit-align-items: center;
}
```

注意：需要添加浏览器前缀进行兼容

第五种：calc() 函数 calc() 函数是 css 中用于动态计算长度值，运算符 ”-“ 前后都需要保留一个空格

.parents {
  position: relative;
}
.children {
  position: absolute;
  top: calc((100vh - 300px) / 2);
  top: -webkit-calc((100vh - 300px) / 2);
  left: calc((100vw - 300px) / 2);
  left: -webkit-calc((100vw - 300px) / 2);
}

注意：需要添加浏览器前缀进行兼容

元素不定宽高水平垂直有哪几种：
1. 父元素设置 display:table;子元素设置 display:table-cell
  
  缺点：IE7 不支持，而且子元素会填满父元素，不建议使用
2. 使用 css3 transform:translate(-50%; -50%)
  
  缺点：兼容性不好，IE9+
3. 使用 flex 布局
  
  缺点：兼容性不好，IE9+
4. 利用伪类元素
定宽高
1. 绝对定位 + 负 margin 值
2. 绝对定位 + transform
3. 绝对定位 + left\top\bottom\right -> 0
4. flex 布局
5. grid 布局
6. table-call + vertical-align + inline-block/margin: auto
不定宽高
1. 绝对定位 + transform
2. table-align
3. flex
4. 父 flex + 子 margin: auto
5. 父 grid + 子 align-self: center/justify-self: center
6. 父 grid + 子 margin: auto
7. writing-mode 属性

2. 说说 em、rem、vh、vw、px 、%的区别？移动端适配解决方案？

rem 是一个相对单位，rem 的是相对于 html 元素的字体大小，没有继承性
em 是一个相对单位，是相对于父元素字体大小有继承性
px 是一个“绝对单位”，就是 css 中定义的像素，利用 px 设置字体大小及元素的宽高等，比较稳定和精确。

px: 是 pixel 像素的缩写，相对长度单位，网页设计常用的基本单位。像素 px 是相对于显示器屏幕分辨率而言的
em: em 是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的 font-size）.如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸特点：
1. em 的值并不是固定的
2. em 会继承父级元素的字体大小
rem: 是 CSS3 新增的一个相对单位，rem 是相对于 HTML 根元素的字体大小（font-size）来计算的长度单位. 如果你没有设置 html 的字体大小，就会以浏览器默认字体大小，一般是 16px

em 与 rem 的区别：rem 是相对于根元素（html）的字体大小，而 em 是相对于其父元素的字体大小
vw、vh vw、vh、vmax、vmin 这四个单位都是基于视口

vw 是相对视口（viewport）的宽度而定的，长度等于视口宽度的 1/100.(假如浏览器的宽度为 200px，那么 1vw 就等于 2px（200px/100）)

vh 是相对视口（viewport）的高度而定的，长度等于视口高度的 1/100.(假如浏览器的高度为 500px，那么 1vh 就等于 5px（500px/100）)

vmin 和 vmax 是相对于视口的高度和宽度两者之间的最小值或最大值
%（百分比）一般来说就是相对于父元素：
1. 对于普通定位元素就是我们理解的父元素
2. 对于 position: absolute;的元素是相对于已定位的父元素
3. 对于 position: fixed;的元素是相对于 ViewPort（可视窗口）

实现移动端适配的核心思想就是：使用 rem 作为样式单位，根据不同分辨率的移动设备设置根元素的 font-size 值

常见问题：

如何使 1rem=10px？

在设置 HTML{font-size：62.5%；}即可
如果父元素没有指定高度，那么子元素的百分比的高度是多少？

会按照子元素的实际高度，设置百分比则没有效果
如何合理地设置根元素的 font-size 值呢？
1. 将 viewport 宽度设置为移动设备逻辑宽度；
2. 使用 js 根据不同分辨率的移动设备来设置根元素的 font-size 值，注意移动端与 pc 端的临界值；
3. 在样式中字体使用 px 单位，而其它元素使用 rem 单位；
4. 使用 sass 中的 function 来设置一个 px 与 rem 之间的转换函数；
(以 iphone 6 的设计稿为基准，即设计稿横向分辨率为 750，取 100 为参照数（即在使用 rem 时与使用 px 时相差 100 的倍数），则我们可以知道 html 的宽度为 7.5rem（750 / 100），而我们知道 iphone 6 的逻辑宽度是 375px，所以 html 的宽度也为 375px，那么此时 7.5rem * html(font-size) = 375px，所以可以得出：html(font-size) = 375 / 7.5，即 html(font-size) = deviceWidth / 7.5)

通过 js 来设置根元素的 font-size
```
var deviceWidth = document.documentElement.clientWidth
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'
```
前提：就是设置 viewport 宽度为移动设备的逻辑宽度
```
<meta
  name="viewport"
  content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
```
注意：当 deviceWidth 大于 750px 时，我们应该去访问的是 pc 版的页面，所以当 deviceWidth 大于 750px 时我们不应该再改变根元素的 font-size 值
```
   var deviceWidth = document.documentElement.clientWidth
   if (deviceWidth > 750) deviceWidth = 750
   document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px'
   ```
   通过 sass 的 function 来设置一个 px 与 rem 之间的转换函数
   ```css
   @function pxToRem($num) {
       @return ($num/100) * 1rem;
   }
   div {
       width: pxToRem(50);
       height: pxToRem(50);
   }
```

3. 谈谈你对 BFC 的理解？

BFC 即块级格式化上下文，是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局

BFC 有以下特性：
1. 块级元素会在垂直方式一个接一个的排列，和文档流的排列方式一样
2. 垂直方向的距离由margin 决定。属于同一个 BFC 中相邻的两个容器的 margin 会发生重叠
3. 计算 BFC 高度时，浮动元素也参与计算
4. BFC 是一个独立的容器，容器里的内容不会影响到外面的内容
5. BFC 的区域不会与 float box 重叠
触发 BFC 的方式：
1. 根元素 html
2. float 的值不是 none。
3. position 的值 absolute、fixed
4. display 的值是 inline-block、table-cell、flex、table-caption 或者 inline-flex
5. overflow 的值不是 visible
BFC 有哪些作用(解决什么问题)：
1. 实现两栏布局（第一个 float 后覆盖在第二个上面）BFC 的区域不会与 float box 重叠
```
.left {
  float: float;
}
.right {
  overflow: hidden;
}
```
1. 解决高度塌陷或margin 重叠问题（使用 float 脱离文档流后，高度塌陷）
2. 解决浮动元素无法撑起父元素

4. 说一下 FlexBox 和 Grid 布局，以及适用场景？

FlexBox: 在 flex 布局中，有两个概念需要谨记：容器与元素。在一个 html 标签中声明样式：display：flex or display：inline-flex 即声明了一个 flex 的容器，在这个容器里面的元素即为 flex 元素。而 flex 所有的样式属性分为两类：容器属性与元素属性，他们均作用于 flex 元素，只不过 flex 容器中声明的属性统领 flex 所有元素整体显示与排布方式，而 flex 元素的属性表示单一元素的排布方式

容器属性:
1. flex-direction: 是控制 flex 元素的整体布局方向的，它包括四个属性：
  
  row //从左到右默认 row-reverse column //从上到下 column-reverse
2. flex-wrap: 是控制元素是换行显示还是单行显示，它共有三个属性:
  
  no-wrap //不换行默认 wrap // 换行 wrap-reverse //换行反序
3. flex-flow: 是 flex-direction 与 flex-wrap 的统写，语法是:
  
  flex-flow:<‘flex-direction’> || <‘flex-wrap’>
4. justify-content: 控制 flex 元素水平方向的对齐方式，它共有个属性：
  
  flex-start // 默认值默认情况下左对齐 flex-end // 右对齐 center // 居中
  
  下面以 space 开头的属性都是描述剩余空间的排布方式的 space-around //剩余空间围绕在每个子元素的周围 space-between //剩余空间只分布在子元素之间，两端元素左右没有剩余空间 space-evenly // 剩余空间均匀分布在元素两端、之间
5. align-content: 代表元素垂直方向上的分布,而这种分布方式只有在多行的情况下才能够凸显出来，单行情况下设置此属性无效。相对于 justify-content，它多出来一个 stretch 的属性，代表拉伸,默认属性
6. align-items: 就是在单行情况下，控制元素排布方式的。共有 5 个属性： stretch 默认属性，会将元素的高度拉伸至父容器的高度 flex-start 顶部对齐 flex-end 底部对齐 baseline 基线对齐 center 居中
元素属性:
1. order 属性：可以控制 flex 元素的排布顺序，flex 元素会根据 order 从小到大依次排布，order 的默认值为 0，因此如果想要某个元素排在前面，只需要将他的 order 值设为比 0 小的值即可。
2. flex-grow：控制元素所占宽度，默认值为 0，当容器内有剩余空间时，flex-grow 不为 0 的元素将会按照以下规则扩展：
- 容器中只有一个元素设置了 flex-grow
  1. flex-grow 值>=1 那么这个元素会填充容器的剩余空间
  2. flex-grow 在 0-1 之间，那么这个元素会多占用空间为剩余空间乘以这个 flex-grow 的值
- 容器中有多个元素设置了 flex-grow
  1. 所有元素的 flex-grow 的值之和>1。则占用全部的剩余空间，多占用的剩余空间比例即为各个元素所设置 flex-grow 的比例。
  2. 所有元素的 flex-grow 的值之和<1。所占用的剩余空间的比例即为各个元素的 flex-grow 的值的比例
1. flex-shrink 属性与 flex-grow 相反，指的是当空间不足的时候，元素的收缩比例，默认值为 1；其核心思路与 grow 一致
2. flex-basis：定义了在分配剩余空间之前，每个元素的默认宽度，默认为 auto 即元素的宽度；当 flex-basis 的值不为 auto 时，其显示的优先级是高于元素的 width 的
3. flex 属性为以上三个属性的统称，语法为： flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] flex 翻译为中文就是弹性的，所以这个属性就是说明当有空间过大 or 空间不足时，每个元素如何分布。
4. align-self：就是确定单个元素垂直分布状态

Grid: 与 Flex 相同，Grid 也分为容器与元素两个概念；在一个 html 标签中添加样式：display：grid 或者 display：inline-grid，即构建了一个 Grid 的容器，里面的 dom 元素即为 Grid 元素。同样，Grid 也分为两类属性，分别装载在容器与元素上

5. HTML5 有哪些新特性

语义化标签， header, footer, nav, aside,article,section
增强型表单
视频 video 和音频 audio
Canvas 绘图
SVG 绘图
地理定位
拖放 API
WebWorker
WebStorage( 本地离线存储 localStorage、sessionStorage )
WebSocket

6. 响应式布局有哪些实现方式？

百分比布局，但是无法对字体，边框等比例缩放
弹性盒子布局 display:flex
rem布局，1rem=html 的 font-size 值的大小
css3媒体查询 @media screen and(max-width: 750px){}
vw+vh
使用一些框架（bootstrap，vant）

什么是响应式设计：响应式网站设计是一个网站能够兼容多个终端，智能地根据不同设备环境进行相对应的布局
响应式设计的基本原理：基本原理是通过媒体查询检测不同的设备屏幕尺寸设置不同的css样式. 页面头部必须有meta声明的

7. DOM 事件？

事件级别
1. DOM0: element.onclick = function() {}
2. DOM2: element.addEventListener('click', function() {}, false)
3. DOM3: element.addEventListener('keyup', function() {}, false)

DOM0 级事件具有极好的跨浏览器优势，会以最快的速度绑定。删除 DOM 0 事件处理程序，只要将对应事件属性设为 null 即可。

DOM1 一般只有设计规范没有具体实现，所以一般跳过。

DOM2 级事件是通过 addEventListener 绑定的事件，IE 下的 DOM2 事件通过 attachEvent 绑定；可以给某一个元素的同一个行为绑定不同的方法在行内会分别执行。删除 DOM2 事件处理程序，通过 removeEventListener

DOM3 级事件在 DOM2 级事件的基础上添加了更多的事件类型

DOM 事件模型: 捕获、冒泡
DOM 事件流三个阶段：
1. 事件捕获阶段
2. 处于目标阶段：事件通过捕获到达目标元素
3. 事件冒泡阶段：从目标元素上传到 window 对象
Event 对象常见应用
1. event.preventDefault() 阻止默认事件。如阻止 a 标签默认跳转。
2. event.stopPropagation() 阻止冒泡。如：子元素和父元素分别绑定了一个点击事件。此时点击子元素，不希望父元素有反应，就要用到这个函数。
3. event.stopImmediatePropagation() 阻止事件冒泡并且阻止相同事件的其他侦听器被调用（事件响应优先级）。如：一个按钮依次注册了 a、b 两个点击事件，如果希望点击 a 的时候不要触发 b，这用这个函数。
4. event.currentTarget 当前绑定的事件元素
5. event.target 表示当前被点击的元素

8. H5 中的 File、FileReader、Blob、FromData 对象

File 对象可以用来获取某个文件的信息，还可以用来读取这个文件的内容 通常情况下：File 对象是来自用户在一个元素上选择文件后返回的 FileList 对象，也可以是来自由拖放操作生成的 DataTransfer 对象
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据注意：其中 File 对象可以是来自用户在一个元素上选择文件后返回的 FileList 对象,也可以来自拖放操作生成的 DataTransfer 对象,还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile()方法后返回结果

预览图片的 src 使用了 ”data:image/png;base64,xxxxxxxxxxxxx” 这种形式的字符串（base64）, 这种字符串叫做 DataURI 对象，允许将一个小文件进行编码后嵌入到另外一个文档里。可以通过 FileReader 的 readAsDataURL 方法获得文件的 DataURI

readAsDataURL()开始读取指定的 Blob 对象或 File 对象中的内容。当读取操作完成时，readyState 属性的值会成为 DONE，如果设置了 onloadend 事件处理程序，则调用之。同时，result 属性中将包含一个 data:URL 格式的字符串以表示所读取文件的内容。

URL 对象：除了可以使用 base64 字符串作为内容的 DataURI 将一个文件嵌入到另外一个文档里，还可以使用 URL 对象。URL 对象用于生成指向 File 对象或 Blob 对象的 URL。静态方法：URL.createObjectURL()该方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的 URL。URL.revokeObjectURL()该方法用来释放一个之前通过调用 URL.createObjectURL() 创建的已经存在的 URL 对象。
FormData 对象最大优点就是我们可以异步上传一个二进制文件。

前端缓存

localStorage、sessionStorage、cookie 的区别？

cookie：它的主要用于保存登陆信息，比如登陆某个网站市场可以看到'记住密码’，这就是通过在 cookie 中存入一段辨别用户身份的数据来实现的。
sessionStorage：会话，是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但是页面关闭后，sessionStorage 中的数据就会被清空。
localStorage：是 HTML5 标准中新加入的技术，当然早在 IE6 时代就有一个 userData 的东西用于本地存储，而当时考虑到浏览器的兼容性，更通用的方案是使用 flash。如今 localStorage 被大多数浏览器所支持。

三者区别

存储大小
1. cookie：一般不超过 4K（因为每次 http 请求都会携带 cookie、所以 cookie 只适合保存很小的数据，如会话标识）
2. sessionStorage：5M 或者更大
3. localStorage：5M 或者更大
数据有效期
1. cookie：一般由服务器生成，可以设置失效时间；若没有设置时间，关闭浏览器 cookie 失效，若设置了时间，cookie 就会存放在硬盘里，过期才失效
2. sessionStorage：仅在当前浏览器窗口关闭之前有效，关闭页面或者浏览器会被清除
3. localStorage：永久有效，窗口或者浏览器关闭也会一直保存，除非手动永久清除，因此用作持久数据
作用域
1. cookie：在所有同源窗口中都是共享的
2. sessionStorage：在同一个浏览器窗口是共享的（不同浏览器、同一个页面也是不共享的）
3. localStorage：在所有同源窗口中都是共享的