css部分
1.display:none 和 visibility:hidden的区别
display:none会出现回流问题,不会占用空间,设置display:none该元素和其所有后代元素都会隐藏
visibility:hidden不会出现回流问题,隐藏之后任然会占用空间,会影响页面布局,具有继承性,给父元素设置visibility:hidden,子元素也会继承这个属性,如果重新给子元素设置visibility:visible,则子元素会正常显示
2.link和@import的区别
本质上,这两种方式都是为了加载css文件,但还是存在细微的差别
1.根的区别 link属于XHTML标签,而@import是css提供的一 种方式
2.加载顺序的区别 当一个页面刚开始加载的时候,link引入的css会同时进行加载,而@import引用的css会等到页面全部被下载完成之后再加载,这也是为什么网站在使用@import时会出现闪烁的原因(网速慢的时候更明显)
3.兼容性的差别 @import兼容性不如link
为什么要初始化css样式
1.浏览器差异 不同浏览器对有一些标签的默认值不同,如果不初始化css,就会导致页面在浏览器间显示会有差异
2.如果不初始化,整个页面做完会很糟糕,会有很多重复的css样式
淘宝样式初始化
1 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
2 body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
3 h1, h2, h3, h4, h5, h6{ font-size:100%; }
4 address, cite, dfn, em, var { font-style:normal; }
5 code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
6 small{ font-size:12px; }
7 ul, ol { list-style:none; }
8 a { text-decoration:none; }
9 a:hover { text-decoration:underline; }
10 sup { vertical-align:text-top; }
11 sub{ vertical-align:text-bottom; }
12 legend { color:#000; }
13 fieldset, img { border:0; }
14 button, input, select, textarea { font-size:100%; }
15 table { border-collapse:collapse; border-spacing:0; }css3有哪些新特性
过渡 transition
动画 animation
旋转 transform
阴影 box-shadow
边框 border-image
文字阴影 text-shadow
弹性布局 flex
栅格布局 grid
display有哪些值 说明一下他们的作用
常用的有：
none：此元素不显示。
block：将元素显示为块级元素，前后会带换行符。
inline:默认值，元素会被显示为内联元素，前后没有换行符。
inline-block:行内块级元素。
介绍一下标准的css盒模型低版本的ie盒模型有什么不同
css盒模型 有四个属性组成的外边距(margin),内边距(padding),边框(border),内容区(width)
标准盒模型宽高就是内容区宽高
ie盒模型宽高是内边距+边框+内容区
css优先级算法如何计算
优先级就近原则，同权重情况下样式定义最近者为准
!important>内联样式>id>class>属性选择器
谈谈浮动和清除浮动
position的值 relative和absolute定位原点是
absolute相对于static定位以外的第一个父元素进行定位,如果父元素都没有定位则相对于html的根元素定位
fixed 绝对定位,相对于浏览器窗口进行定位
relative 生成相对定位的元素，相对于其正常位置进行定位
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>display:inline-block什么时候不会显示间隙
元素放到同一行
父元素设置font-size:0
png gif jpg的区别和选择
gif: 256色 无损，编辑 保存时候，不会损失 支持简单动画 支持boolean透明，也就是要么完全透明，要么不透明
jpg: 有损压缩， 意味着每次编辑都会失去质量 不支持透明 适合照片，实际上很多相机使用的都是这个格式
png: 无损，其实PNG有好几种格式的，一般分为两类：PNG8和truecolor PNGs；与GIF相比：它通常会产生较小的文件大小 它支持阿尔法（变量）透明度 无动画支持
与JPEG相比: 文件更大 无损 因此可以作为JPEG图片中间编辑的中转格式
结论：
JPEG适合照片
GIF适合动画
PNG8适合其他任何种类——图表，buttons，背景，图表等等
html5有哪些新特性,移除了哪些元素
绘画 canvas
本地离线存储 localStorage
事件监听
移除的元素 <basefont> 默认字体，不设置字体，以此渲染 <font> 字体标签 <center> 水平居中 <u> 下划线 <big> 大字体 <strike> 中横线 <tt> 文本等宽
结构性元素主要负责web上下文结构的定义
section：在 web 页面应用中，该元素也可以用于区域的章节描述。
header：页面主体上的头部， header 元素往往在一对 body 元素中。
footer：页面的底部（页脚），通常会标出网站的相关信息。
nav：专门用于菜单导航、链接导航的元素，是 navigator 的缩写。
article：用于表现一篇文章的主体内容，一般为文字集中显示的区域。
级块性元素主要完成web页面区域的划分，确保内容的有效分割。
aside：用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。
figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。
code：表示一段代码块。
dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。
行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展示的基础。
meter：表示特定范围内的数值，可用于工资、数量、百分比等。
time：表示时间值。
progress：用来表示进度条，可通过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。
video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
交互性元素主要用于功能性的内容表达，会有一定的内容和数据的关联，是各种事件的基础。
details：用来表示一段具体的内容，但是内容默认可能不显示，通过某种手段（如单击）与 legend 交互才会显示出来。
datagrid：用来控制客户端数据与显示，可以由动态脚本及时更新。
menu：主要用于交互菜单（曾被废弃又被重新启用的元素）。
command：用来处理命令按钮。
纯表现的元素：basefont，big，center，font,s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
cookies,session和localStorage,sessionStroage
CSS如何实现居中
meta标签有哪些
CSS3动画的实现方式有哪些，动手写一下将一个div在1s内移动300px如何理解
html语义化
行内元素有哪些？块级元素有哪些？空(void)元素有那些？行内元素和块级元素有什么区别
行内标签: a,span,input,button,b,strong,select
块级元素: div,ul,li,ol,p,h1-h6
空元素: 即没有内容的html元素 br,hr,meta,img,input,link
xhtml和html有什么区别
xhtml比较严格,对大小写敏感,基于可扩展标记语言(XML)
html比较松散,对大小写不敏感,基于标准通用的标记语言(SGML)
几种常见的CSS布局
单列布局,双列自适应布局,三列布局
js部分
闭包
developer.mozilla.org/zh-CN/docs/…
说说你对作用域链的理解
请解释什么是事件代理
谈谈This对象的理解
事件模型
Ajax原理
模块化开发怎么做
XML和JSON的区别
为什么要有同源限制
offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
offsetWidth: 包括元素宽度,内边距和边框,不包括外边距
clientWidth: 包括元素宽度,内边距,不包括边框和外边距
scrollWidth: 包括元素宽度,内边距和溢出尺寸,不包括边框和外边距,无溢出情况下与clientWidth相等
javascript有哪些方法定义对象
字面量
new
构造函数
Object.create()
介绍js的基本数据类型
介绍js有哪些内置对象
说几条写JavaScript的基本规范
变量不在一行声明
判断true和false时使用 === 不使用 ==
结尾最好加分号
for和if就算只有一行也要加{}
JavaScript有几种类型的值？，你能画一下他们的内存图吗?
javascript创建对象的几种方式
构造函数模式
构造函数模式，即通过给构造函数传递不同的参数，然后调用构造函数来创建不同对象。
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayname = function(){
alert(this.name);
};
}
var person1 = new Person("a",29,"cc");
var person2 = new Person("b",26,"cc");使用自定义的构造函数，可以将它的实例标识为一种特定的类型，这正是构造函数模式胜过工厂模式的地方。
比如（instanceof用于检测对象类型）：
person1 instanceof Person //true 这里可以看到person1也是Person的实例，而工厂模式没有能具体检测对象类型的这一特定person1 instanceof Object //true 所有对象均继承自Object构造函数模式的主要问题，就是每个方法都要在每个实例对象上重新创建一遍，j即使是同名方法或者两个方法的作用一样，而不同实例对象上的同名方法其实是不一样的，这样就造成了一种冗余，比如：
person1.sayname != person2.sayname工厂模式
工厂模式是用函数来封装创建对象的细节，在函数里面创建对象并返回对象，就有些像工厂里的流水线一样。
但是工厂模式有个缺点，就是对象识别问题，即它不知道一个对象的类型。
function createPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayname = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("a",29,"cc");
var person2 = createPerson("b",26,"cc");原型模式
有关原型和原型链的知识已经在点击打开连接介绍过了，这里不作过多介绍。
使用原型对象的好处就是，可以让所有对象实例共享它所包含的属性和方法。
function Person(){}
Person.prototype.name="a";
Person.prototype.age="29";
Person.prototype.job="cc";
Person.prototype.sayname = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
这样person1.sayname == person2.sayname这样一来，所有的属性和方法都是大家（所有实例）共享的了，换句话说，person1和person2访问的sayname和name等 都是同一个。
还有就是重写原型的时候，切断了现有原型与任何之前已存在的对象实例之间的联系，它们引用的仍是最初的原型。可以通过在重写原型里添加constructor:Person来建立新联系。
原型模式的问题就是共享问题，在实例或原型上改变一下，在其他实例中都会相应的改变。这样我们引入组合使用构造函数模式和原型模式。
组合使用构造函数模式和原型模式
组合使用中，构造函数模式用于定义实例自己的属性，原型模式用于定于方法和共享的属性。
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
}
Person.prototype = {
constructor: Person,
sayname: function(){
alert(this.name);
}
}
var person1 = new Person("a",29,"cc");
var person2 = new Person("b",26,"cc");这种构造函数与原型混合的模式，是目前使用较多的。其它创建对象的方式还有动态原型模式、寄生构造函数模式、稳妥构造函数模式。
eval是做什么的
可以把字符串直接当做JavaScript代码执行
null，undefined的区别
null是空
ndefined是没有的意思,声明了暂时还没有赋值
[“1”, “2”, “3”].map(parseInt) 答案是多少
javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么
严格模式,对代码标准型要求较高
JSON的了解
传递数据的轻量级数据交换格式
值的类型: 只能是数组或者对象,不能是函数,正则表达式对象,日期对象
简单类型的值: 字符串,数值,布尔值,null
js延迟加载的方式有哪些
settimeout
defer(在页面load完之后再执行)
<script defer="defer"></script>动态创建DOM
同步和异步的区别
同步: 函数一个接一个执行,前一个函数没有执行完,后面的函数都会等前一个执行完之后再执行
异步: 前面函数执行不影响后面函数的执行
说说严格模式的限制
attribute和property的区别是什么
css与js动画差异
代码复杂度，js 动画代码相对复杂一些
动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css动画不能添加事件
动画性能看，js 动画多了一个js 解析的过程，性能不如 css 动画好
手写jquery插件，说说实现思路
(function(JQ){var jq = window = $attr: function(){}})(window)Ajax请求状态及意义
readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
0 代表未初始化。 还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。
响应发送完毕 常用状态码（status）及其含义：
404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok) 3
04 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )
什么情况下出现跨域问题，如何解决
不同源: 协议不同或者域名不同,端口不同
jsonp
cors
nginx代理
nodejs中间件代理
说说js实现继承的几种方式
vue面试题
vue的生命周期:简述每个生命周期适用哪些场景
vue中常用的钩子接口第一次页面加载会触发哪几个钩子
vue如何实现数据双向绑定
兄弟组件间传值?创建一个事件中心
vue.js的两个核心是什么
vue路由实现
scss是什么?有哪几大特性?在vue.cli中安装使用步骤
vue实现路由懒加载
npm run dev 输入后的执行过程
vue如何优化首屏加载速度
垂直居中对齐如何操作
文字水平垂直居中
text-align: center;
line-height: 当前元素高度;元素的水平垂直居中
// 需要固定宽高
position: absolute;
top: 0;
left: 0;
bottom: 0;
left: 0;
margin: auto;
width: xxx;
height: xxx;// 需要知道具体的元素宽高
position: absolute;
width: xxx;
height: xxx;
top: calc(50% - xxx/2);
left: calc(50% - xxx/2);// 不需要知道元素的宽高
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);display: flex;
justify-content: center;
align-items: center;如何适配移动端
axios有哪些特点
什么是vuex?
在vuex中如何使用异步修改
登录注册用哪些技术
表单提交有哪几种方式
vuex中常用方法
state: 储存变量,类似vue里data
getters: 派生状态,也就是set,get中的get,有两个可选参数:state,getters分别可以获取state中的变量和其他的getters.
外部调用方式: store.getters.personInfo(),类似于vue中computed
mutations: 提交状态修改,也就是set,get中的set,这是vuex中唯一可以修改state中变量的方式,但不支持异步操作,第一个参数默认是state
外部调用方式: store.commit('SET_AGE', 18), 类似于vue中methods
actions: 和mutations类似,不过actions支持异步操作
外部调用方式: store.dispatch(mutations中的方法)
modules: store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()
实现元素页面居中有哪些方式
固定长度 显示省略号
overflow: hidden; /* 超出的部分隐藏起来 */
white-space: nowrap;/* 为规定段落中的文本不换行 */
text-overflow: ellipsis;/* 为当文本内容溢出时显示省略标记 */
-o-text-overflow: ellipsis;/* 支持 Opera */
加载路由有几种方式
ajax表单提交有哪些常用方式(type类型)
axios中get和post区别
跨域问题处理有哪几种
1> document.domain + iframe (只有在主域相同的时候才能使用该方法)
2> 动态创建script
3> location.hash + iframe
4> window.name + iframe
5> postMessage（HTML5中的XMLHttpRequest Level 2中的API）
6> CORS
7> JSONP
8> web sockets
css3中添加阴影如何做?
用哪个属性flex布局实现元素居中?页面居中的方法
justify-content
js中数组的常用方法
Array.map() 此方法是将数组中的每个元素调用一个提供的函数,结果作为一个新的数组返回,并不会改变原来的数组
Array.forEach() 此方法是将数组中的每个元素执行传进提供的函数,没有返回值,注意和map方法区分
Array.filter() 此方法是将所有元素进行判断,将满足条件的元素作为一个新的数组返回
Array.every() 此方法是将所有元素进行判断返回一个布尔值,如果所有元素都满足判断条件,则返回true,否则为false
Array.some() 此方法是将所有元素进行判断返回一个布尔值,如果存在一个满足条件则返回true,否则返回false
Array.push() 此方法在数组最后添加一个新元素,会改变数组的长度
Array.pop() 此方法是在数组最后删除一个元素,并返回数组,会改变数组长度
Array.shift() 此方法删除数组第一个元素,并返回该元素的值,会改变数组的长度
Array.unshift() 此方法会在数组头部添加元素,会改变数组的长度
Array.isArray() 判断一个对象是不是数组,如果是返回true,否则返回false
Array.concat() 此方法可以将多个数组合并成一个数组的方法
Array.toString() 此方法将数组转化为字符串
Array.join() 此方法也可将数组转化为字符串,并以参数分割
Array.splice(开始位置, 删除个数, 元素) 万能方法, 可以实现增删改
判断数据类型的方法
typeof
instanceof
toString()
view model的实现方法
全局首位钩子函数
函数节流是什么,怎么理解
css权重如何理解,那个权重最高
如何自己创建公共组件
第一步: 在components目录创建组件文件,比如(index.vue),script一定要export default{}
第二步: 在需要用到的页面(组件)中导入,import index from '@/components/index.vue'
@ 是webpack配置
第三步: 注入到页面的components属性中,components: {index: index}
第四步: 在template中使用 <index></index>
