html5

html5新特性

媒体查询 音视频 离线存储 cavas绘画 拖拽 本地存储

css

css 新特性

CSS3的选择器

E:last-child 匹配父元素的最后一个子元素E。

E:nth-child(n)匹配父元素的第n个子元素E。

E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

@Font-face 特性

Font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

圆角

border-radius: 50%;

阴影（Shadow）

.class1{
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5);
}

CSS3 的渐变效果

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));
这里 linear 表示线性渐变，从左到右，由蓝色（#2A8BBE）到红色（#FE280E）的渐变。

css盒模型

CSS盒子模型与怪异盒模型
盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。

     盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型） 、第二种IE标准的盒子模型（怪异盒模型）

     当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用的是怪异盒模型。怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现在IE内核的浏览器
     标准盒模型中width指的是内容区域content的宽度；height指的是内容区域content的高度。
复制代码

标准盒模型下盒子的大小 = content + border + padding + margin

怪异盒模型中的width指的是内容、边框、内边距总的宽度（content + border + padding）；height指的是内容、边框、内边距总的高度

css宽高不固水平居中方法

flex布局

justify-content 和 align-items，都设置为 center，即可实现居中。

定位

position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%)

绝对定位

使用绝对定位布局，设置 margin:auto;，并设置 top、left、right、bottom 的 值相等即可（不一定要都是 0）

flex属性有哪些

flex-direction属性决定主轴的方向（即项目的排列方向）。
.box {
    flex-direction: row | row-reverse | column | column-reverse;
}
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿,自上而下。
column-reverse：主轴为垂直方向，起点在下沿,自下而上。
复制代码

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，应该如何换行。
.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
 nowrap（默认）：不换行,宽度自动压缩。
 wrap：换行，第一行在上方。
 wrap-reverse：换行，第一行在下方。
 
复制代码

 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}
.box{
  flex-flow:row||nowrap;
}
复制代码

justify-content属性定义了项目在主轴上(即横向)的对齐方式。

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，组件之间的间隔都相等。
space-around：距边界两侧的间隔相等，元素之间的间隔比项目与边框的间隔大一倍。
复制代码

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴
复制代码

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴
复制代码

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
.item {
  order: <integer>;
}
复制代码

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item {
  flex-grow: <number>; /* default 0 */
}
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
复制代码

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
.item {
  flex-shrink: <number>; /* default 1 */
}
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
注:负值对该属性无效。
复制代码

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item {
    flex-basis: <length> | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
复制代码

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
复制代码

选择器优先级

!important 
内联样式style="" 
ID选择器#id 
类选择器/属性选择器/伪类选择器.class.active[href=""] 
元素选择器/关系选择器/伪元素选择器html+div>span::after 
通配符选择器
复制代码

BFC

BFC（Block Formatting Context）格式化上下文，
是Web页面中盒模型布局的CSS渲染模式，
指一个独立的渲染区域或者说是一个隔离的独立容器。
复制代码

BFC的应用

防止margin重叠，清除内部浮动，自适应两（多）栏布局，防止字体环绕 
复制代码

触发BFC条件

 根元素float的值不为none，overflow的值不为visible，
 display的值为inline-block、table-cell、
 table-caption，position的值为absolute、fixed 
复制代码

BFC新特性

内部的Box会在垂直方向上一个接一个的放置。
垂直方向上的距离由margin决定。
bfc的区域不会与float的元素区域重叠。
计算bfc的高度时，浮动元素也参与计算。
bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素
复制代码

清除浮动

clear:both 给父元素添加 overflow:hidden 或者 auto 样式，
触发BFC。
使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的
复制代码

CSS中 link 和@import 的区别是？

link属于HTML标签，而@import是CSS提供的页面被加载的时，
link会同时被加载，而@import引用的CSS会等到页面被加载完再加载 import只在
IE5以上才能识别，而link是HTML标签，
无兼容问题 link方式的样式的权重 高于@import的权
复制代码

javascript

ES6有哪些新特性

let 所声明的变量，只在let 命令所在的代码块内有效
const 声明的变量是常量，不能被修改
Set()是有序列表的结合，而且是没有重复的，因此Set()对象可以用于数组的去重,
箭头函数 
解构赋值
模版字符串（template string），使用 ` ` （反引号作为标识）
Symbol是ES6中的一个新特性，所有拥有[Symbol.iterator]()方法的对象被称为 可迭代的。
Promise 
async函数
 ES6 提供三个新的方法 —— entries()，keys()和values()。
 用于遍历数组。它们都返回一个遍历器对象，可以用for...of循环进行遍历，
 唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，
 entries()是对键值对的遍历。
复制代码

for (let index of ['小明', '小红'].keys()) { console.log(index); } // 0 // 1 for (let item of ['小明', '小红'].values()) { console.log(item); } // '小明' // '小红' for (let [index, item] of ['小明', '小红'].entries()) { console.log(index, item); } // 0 "小明" // 1 "小红"

cookie，localStorage，sessionStorage的区别

cookie保存在浏览器端，session保存在服务器端，单个cookie保存的数据不能超过4kb，
cookie只能保存字符串类型，以文本的方式。
.应用场景
cookie：
（1）判断用户是否登录过网站，以便下次登录时能够实现自动登录（或者记住密码）。
（2）保存上次登录的事件等信息。
（3）保存上次查看的页面
（4）浏览计数
.缺点
cookie：
（1）大小受限
（2）用户可以操作（禁用）cookie，使功能受限
（3）安全性较低
（4）有些状态不可能保存在客户端
（5）每次访问都要传送cookie给服务器，浪费宽带
（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。
复制代码

2.存储大小

localStorage和sessionStorage的存储数据大小一般都是：5MB

3.存储位置

localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信

4.存储内容类型

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5.获取方式

localStorage：window.localStorage
sessionStorage：window.sessionStorage

6.应用场景

localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据
sessionStorage：敏感账号一次性登录
复制代码

vue

Vue中双向数据绑定是如何实现的？

答：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 Object.defineProperty()方法。

单页面应用和多页面应用区别及优缺点

答：单页面应用（SPA），通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载
所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。
但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。
多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新
单页面的优点：
用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小；前后端分离；页面效果会比较炫酷（比如切换页面内容时的专场动画）。
单页面缺点：
不利于seo；导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）；初次加载时耗时多；页面复杂度提高很多。
复制代码

v-if和v-for的优先级

答：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，
这意味着 v-if 将分别重复运行于每个 v-for 循环中。
所以，不推荐v-if和v-for同时使用。
如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。
复制代码

vue常用的修饰符

答：.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；
.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。
复制代码

简述每个周期具体适合哪些场景

答：
beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。
复制代码

created和mounted的区别

答：created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
复制代码

.vue获取数据在哪个周期函数

答：一般 created/beforeMount/mounted 皆可.
比如如果你要操作 DOM , 那肯定 mounted 时候才能操作.
复制代码

mvvm 框架是什么？

答：vue是实现了双向数据绑定的mvvm框架，当视图改变更新模型层，当模型层改变更新视图层。在vue中，使用了双向绑定技术，就是View的变化能实时让Model发生变化，而Model的变化也能实时更新到View。

$route 和$router 的区别

答：$router是VueRouter的实例，在script标签中想要导航到不同的URL,使用$router.push方法。返回上一个历史history用$router.to(-1)$route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

vue-router实现路由懒加载（ 动态加载路由 ）

答:三种方式
第一种：vue异步组件技术 ==== 异步加载，vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件。
第二种：路由懒加载(使用import)。
第三种：webpack提供的require.ensure()，vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。
复制代码

你在vue项目开发中遇到那些问题？

遇到的问题：watch的深度监听deep:true 导致了 Maximum call stack size exceeded

记录
项目里有一个奇大无比及其复杂的的数据结构，一位同学对其进行了深度监听，但是在执行的handler方法里又对这个data做了一些操作，导致了栈溢出。
deep:true，深度监听，由于watch只能监听到一到两层结构，于是就有了deep的深度监听，遍历每一层为其加上监听器，这样是非常消耗性能的一个操作。
后来改为监听具体属性，用"" 括起来对应需要监听的字段
`"data.key":{
    handler(data) {
        xxxFuction
    },
    immediate:false,
    deep:false,
}`
watch有三个常用的属性
immediate ：如果在 wacth 里声明了之后，
就会立即先去执行里面的handler方法，
如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行
handler：值变化后的回调函数
deep：深度监听
复制代码

遇到的问题：页面动态扩展，从没有滚动条到出现滚动，导致页面抖动

记录：
页面主体部分是一个组件，数据为加载前，页面没有滚动条，v-for 数据加载完成后，撑满一屏多，出现了滚动条，于是页面开始抖动一下，因为可是宽度变了
解决方案：让bodyposition: absolute;脱离既定文档流，出现的滚动是在body体内而不是body外部，从而让body不闪动
`html {
  overflow-y: scroll;
}

:root {
  overflow-y: auto;
  overflow-x: hidden;
}

:root body {
  position: absolute;
}

body {
  width: 100vw;
  overflow: hidden;
}
复制代码

vue初始化页面闪动问题

答：使用vue开发时，在vue初始化之前，由于div是不归vue管的，所以我们写的代码在还没有解析的情况下会容易出现花屏现象，看到类似于{{message}}的字样，虽然一般情况下这个时间很短暂，但是我们还是有必要让解决这个问题的。
首先：在css里加上[v-cloak] {
display: none;
}。
如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"
复制代码

vue更新数组时触发视图更新的方法

答:push()；pop()；shift()；unshift()；splice()； sort()；reverse()

遇到的问题：vertical-align 设置什么情况下才会起作用

记录：
最近居中犯糊涂了，于是写了一篇专门的居中屡屡思路：上下左右垂直居中的几种方式；
vertical-align什么情况下会起作用呢
父级设置了line-height，子div为 inline-block/inline元素。
inline元素作为父元素可以不设置line-height，字体会撑起一个适合子元素作用的高度。
`<span class="box">
    <span class="dot" style="
    display: inline-block;
    width:4px;
    height:4px;
    background: #000;
    vertical-align: middle;
    "></span> 
    边上的点可以使用vertical-align设置位置 
</span>
复制代码

遇到的问题：vue Webpack打包后的dist 文件夹中新增除static其他名称的静态文件夹

记录：
现在项目打包出来的dist文件夹中包含一个index.html 和一个static文件夹
现在项目需求需要部署到云效平台，前端放置对应的Nginx配置信息一起打包，必须在dist根目录下，于是需要在根目录打包下生成新的nginx的Configs文件夹

复制代码

步骤：找到build下的这两个文件

使用Webpack的 CopyWebpackPlugin 进行指定位置代码的拷贝和打包

配置from 的来源地址和打包后的to 地址

git

git init        初始化仓库。
git add .       添加文件到暂存区。
git commit -m   将暂存区内容添加到仓库中
git clone       拷贝一份远程仓库，也就是下载一个项目。
git add	        添加文件到仓库
git status	查看仓库当前的状态，显示有变更的文件。
git diff	比较文件的不同，即暂存区和工作区的差异。
git commit	提交暂存区到本地仓库。
git reset	回退版本。
git rm	        删除工作区文件。
git mv	        移动或重命名工作区文件。
git log         查看历史提交记录
git remote	远程仓库操作
git fetch	从远程获取代码库
git pull	下载远程代码并合并
git push	上传远程代码并合并
复制代码

webpack

Webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程 :

初始化参数：从配置文件和 Shell 语句中读取与合并参数,得出最终的参数。

开始编译：用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,
执行对象的 run 方法开始执行编译。

确定入口：根据配置中的 entry 找出所有的入口文件。

编译模块：从入口文件出发,调用所有配置的 Loader 对模块进行翻译,
再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。

完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。

输出资源：根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。

输出完成：在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

复制代码

loader和plugin的区别

Loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。

loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。

本质上,webpack loader 将所有类型的文件,转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

Plugin
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。

插件的范围包括,从打包优化和压缩,一直到重新定义环境中的变量。插件接口功能极其强大,可以用来处理各种各样的任务。
复制代码