1、html
1.未知宽高元素，如何实现垂直水平居中?
1.第一种是使用绝对定位的方法
通过left,top以及transform属性使元素水平垂直居中，其中translate属性取值为负数时表示向左和向下移动
2.第二种方法是把元素的父盒子设置为弹性盒子
通过设置父盒子为弹性盒子，并设置子元素在主轴上居中对齐（justify-content: center;），再设置子元素在主轴和侧轴上居中对齐（align-items: center;）
3.第三种是把父盒子设置为表格元素
通过设置text-align: center;和vertical-align: middle;将子元素水平垂直居中，要注意的是需要把子元素设置成行内块元素，因为行内元素不能设置宽高
4.还有一种方法是将父盒子设置为网格元素（dispaly:grid）
2.css：左中右布局占满屏幕，左右两块固定宽度200px ，中间自适应，先加载中间块
分析：
1.中间自适应
弹性布局display:flex
flex-grow增长系数，左右默认为0，中间设置为1即可分配所有剩余空间（分配给左右固定宽度之后的空间）
2：先加载中间
css选择器优先级问题
（1）越精确优先级越高
id选择器>类选择器>元素选择器(伪类、伪元素等暂不讨论)
（2）css文件里越后面优先级越高（相同类型）
用于先加载中间块（单纯满足需求：先加载中间块，和自适应没有关系）
代码：
html
<!DOCTYPE html>
<html>
<head>
<title>左中右布局</title>
<link rel="stylesheet" href="左中右布局.css"/>
</head>
<body>
<div class="flex-container">
<div class="container-left">
左边宽度固定200px
</div>
<div class="container-center">
中间自适应
</div>
<div class="container-right">
右边宽度固定200px
</div>
</div>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
.flex-container{
width: 100%;
height: 1000px;
display: flex;
text-align: center;
line-height: 1000px;
}
.container-right{
width: 200px;
background-color: blue;
}
.container-left{
width: 200px;
background-color: red;
}
.container-center{
flex-grow: 1;
background-color: yellow;
}
3.怎么解决外边距塌陷问题?
让元素形成BFC的布局就可以解决外边距塌陷
BFC全称是box-formatting-context (块级格式化上下文) 它是一个独立的渲染区域规定了内部block-level的盒子如何渲染并且不影响外部元素。
BFC的规则或者说是特点
1.独立且隔离的一个区域
2.里面的盒子垂直排列
3.属于同一个BFC相邻的俩个盒子（父子关系 相邻的兄弟关系）会有内边距重叠
4.BFC的区域不会与float重叠；
5.计算BFC的高度时，浮动元素也参与计算。
创建BFC（解决方案）：
1、border-top：1px solid;（这个解决方法最好，但它其实并不是BFC，相当于加了一堵墙不让margin-top冲出去。下面的 2-6 都是BFC，虽然可以解决问题，但有一些副作用，很有可能会影响原来元素的功能，比如父元素本来不应该浮动，虽然你设置浮动之后解决margin塌陷但是使得元素本来的正常功能受到影响）
2、浮动元素（元素的 float 不是 none）
3、绝对定位元素（元素的 position 为 absolute 或 fixed）
4、行内块元素
5、overflow 值不为 visible 的块元素
6、弹性元素（display为 flex 或 inline-flex元素的直接子元素）
4.怎么理解语义化?
语义化就是构成HTML结构的标签要有意义，比如有这样的标签：head表示页面头部，main表示页面主题，footer表示页面底部。那么这些标签构成的HTML结构就是有意义的，也是语义化的。如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。
6、Html5 有哪些新特性、移除了哪些元素？
新增元素：
绘画canvas
用于媒介回放的video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
cookie : 只在设置的cookie过期时间之前有效，即使窗口或者浏览器关闭也有效。
语义化更好的内容元素，比如 article 、footer、header、nav、section
表单控件 ，calendar 、 date 、 time 、 email 、 url 、 search
新的技术 webworker 、 websocket 、 Geolocation
移除的元素：
纯表现的元素：basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
对可用性产生负面影响的元素：frame 、 frameset 、 noframes
答案
2.CSS
CSS3新特性：
1、颜色：新增RGBA，HSLA模式
2、文字阴影（text-shadow）
3、边框： 圆角（border-radius）边框阴影： box-shadow
4、盒子模型：box-sizing
5、背景：background-size 设置背景图片的尺寸
background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于自适应布局
6、渐变：linear-gradient、radial-gradient
7、过渡：transition，可实现动画
8、自定义动画
9、在CSS3中唯一引入的伪元素 ：selection.
10、媒体查询，多栏布局
11、border-image
12、2D转换：transform：translate(x，y) rotate(x，y) skew(x，y) scale(x，y)
13、3D转换
14、新增选择器：属性选择器、伪类选择器、伪元素选择器。
3.js
1.闭包是什么?或者说如何会产生闭包?闭包的利弊?
闭包是指有权访问另外一个函数作用域中的局部变量的函数。声明在一个函数中的函数，叫做闭包函数。
闭包的利：
1.保护函数内变量安全，实现封装，避免变量流入其他环境造成命名冲突。
2.在内存中维持一个变量，可以做缓存。
3.匿名自执行函数可以减少内存消耗。
闭包的弊：
容易内存泄漏
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
2.作用域是什么?或者说一下你对全局执行上下文和函数执行上下文的理解
在全局执行上下文中，this 的值指向全局对象(在浏览器中，this引用 Window 对象)。
如果是在函数执行上下文中，this的值取决于该函数是如何被调用的。如果它被一个引用对象调用，那么 this 会被设置成那个对象，否则 this 的值被设置为全局对象或者 undefined（在严格模式下），除此之外，我们还可以使用call、apply和bind指定this。
答案
3.js数据类型有哪些
基本数据类型：null，undefined，Bigint，Boolean，string，number，symbol
引用数据类型：object
NaN是一个数值类型，但不是一个具体的数字
4.null和undefined的区别
具体区别：JavaScript的最初版本是这样区分的：null是一个表示“无”的对象（空对象指针），转为数值时为0；
undefined是一个表示“无”的原始值，转为数值时为NaN
5.原型链是什么
1.原型可以解决什么问题
对象共享属性和共享方法
2.谁有原型
函数拥有：prototype
对象拥有：__proto__
3.对象查找属性或者方法的顺序
先在对象本身查找-->构造函数中查找--->对象的原型--->构造函数的原型中--->当前原型
4.原型链
4.1是什么?:就是把原型串联起来
4.2原型链的最顶端是null
6.实现继承的方法有哪些?
1.extends
2.原型链：new
3.call(this)
4.组合式继承:call+new
7.ES6新特性有哪些?
es6:let const 三点运算符 箭头函数 解构赋值
8.var、let、const区别
var、let、const共同点是可以声明变量
区别一：
var具有变量提升的机制
let和const没有变量提升的机制
9.promise有几种状态
有3种状态
pending（进行中）
fulfilled（已成功）
rejected(失败)
4.vue
1.key做唯一标识
循环当中加key作为标识是为了解决产生等数据有变动，而不会造成显示异常（混乱）的场景，而且使用key也能提升效率
2.Vue双向绑定原理
vue中数据是在data中定义的，但是可以通过this.xx打印出来，而且this.xx修改了data中的数据也会修改，就证明了data也是双向绑定的数据。
vue流程是这样的：通过compile去编译解析模版中的数据从而更新视图层，例如使用了v-model这样的指令，他的修改流程是这样的：要通过observer去劫持数据（this.xxx）发生的变化，如果改变了就去通知订阅者。从而再去执行update方法来更新视图层，从而实现数据双向绑定。
3.v-if和v-show区别
v-if是创建和删除
v-show是显示和隐藏
如果一进入页面不显示的情况下：使用v-show不如v-if，但是频繁切换显示和隐藏状态v-show性能比v-if频繁创建删除好的多
4.computed和watch的区别?原理是什么
俩中在不同场景下使用的方式：比如一个数据会在俩处调用展示，一定会用computed来提升性能，如果就一处无所谓。
watch 可以监听路由变化、也可以监听数据，如果数据不发生改变，watch不会执行的。
5.Vuex是响应式，Vuex是单向数据流还是双向
vuex是单向数据流,表单是双向数据绑定,所以有表单的地方就不要使用vuex
Vuex
1mutations和actions有什么区别
回答：
mutations必须是同步函数，在 mutation 中混合异步调用会导致你的程序很难调试
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
面试题：v-if和v-for优先级
v-for的优先级要比v-if高
面试题：ref是什么
来获取dom的
面试题：next Tick是什么
获取更新后的dom内容
当dom都更新（都执行完毕）了再执行nextTick函数回调
面试题：scoped原理
1.作用：让样式在本组件中生效，不影响其它组件
2.原理：给节点新增自定义属性，然后css根据属性选择器添加样式
面试题：路由导航守
样式穿透
>>>
/deep/
::v-deep 【通用】
场景：引入组件或者插件，要修改css，但是style scoped，这时候要穿透了
3549
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
