【前端】前端面试

HTML & CSS

块级元素和内联元素有哪些

CSS两种盒子模型

标准盒模型和IE盒模型（区别）

• 在标准盒模型性中,可以看到：
  盒子在网页中实际占用:
  宽 =width + padding2+border2 + margin2
  高=height + padding2+border2 + margin2
  盒模型实际大小:
  宽 = width +padding2+border2
  高 = height +padding2 + border2

• IE盒模型（怪异盒模型）
  盒子在网页中实际占用:
  宽 =width +margin2
  高=height + margin2
  盒模型实际大小:
  宽 = width
  高 = height
  不同的是content内容区包括了border和padding

IE盒模型的优点就是盒子实际的宽高就是自己设置的宽高，无须再进行计算，它的padding和border已经包含在content中

盒模型宽度计算

简单实现一个三角形

实现一个扇形

对margin的top left right bottom设置为负值，有什么效果？

什么是BFC？如何应用？

float布局

1.并排一行
2.破环文档流
3.包裹块状化

CSS选择器

CSS常用选择器归纳大全

CSS的Position属性（定位属性）有哪些？分别参照什么定位？

如何使一个元素水平垂直居中

line-height如何继承

哪些属性能继承

消除图片底部间隙的方法

单行溢出的隐藏

rem是什么？px，em，rem的区别？

rem的适配方案原理是什么？

响应式布局常见的方案

响应式是通过媒体查询技术使得一个网站兼容多种屏幕尺寸的设备
1.通过响应式实现rem布局

2.通过js来实现rem布局

使用一个元素显示以及隐藏的方式？

CSS sprites 是什么？它的优势和劣势？

描述一下CSS中的渐进增强，优雅降级之间的区别？

介绍对浏览器内核的理解

重绘和重排的区别？

meta标签viewpoint的理解

图片img标签title与alt属性的区别

link和@import的区别

简述一下src与href的区别

HTML和XHTML的区别

label标签作用

transform变形

CSS3动画

CSS3过度

transition和animation有何区别

nth-child和nth-if-type的区别是什么？

选择器优先级，怎么计算？

CSS3中有哪些新特性

画一条0.5px的线

ES6

讲一下es6有哪些新特性

• 1） let声明变量和const声明常量，两个都有块级作用域；

ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明。

• 2）箭头函数

ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义

• 3）模板字符串

板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串

• 4）解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值
数组解构赋值失败会返回什么？（undefined）

• 5）for of循环

for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串

• 6）import、export导入导出

ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用

• 7）set数据结构

Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数

• 8）… 展开运算符

可以将数组或对象里面的值展开；还可以将多个值收集为一个变量

• 10）class 类的继承
• 11）async、await(ES7)

使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程,提高代码的简洁性和可读性
async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成

• 12）promise

Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大

• 13）Symbol

Symbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的

• 14）Proxy代理

使用代理（Proxy）监听对象的操作，然后可以做一些相应事情

JS

js的数据类型

Javascript数据类型分为基本数据类型与引用数据类型

• 基本数据类型为：

  字符串（String）、数字(Number)、布尔(Boolean)、空值（Null）、未定义（Undefined）、符号（symbol）。

• 引用数据类型为：对象(Object)

  其中数组(Array)、函数（function）是一种特殊的对象。
  date - - （时间）

axios的二次封装

二次封装axios

闭包的了解和应用，滥用闭包的问题

防抖和节流

原型和原型链

VUE

v-if和v-for的优先级

v-for的优先级高

VUE2.0生命周期

第一次进入页面，会执行哪些生命周期，顺序？
前四个，

哪个生命周期可以获取到data中的数据?create
哪些生命周期可以获取到$el?mounted

keep-live

加入keep-live会多两个生命周期：activated，deactivated

computed、methods、watch有什么区别

双向绑定的实现原理

组件通信

props和data的优先级

props ——》methods ——》 data ——》computed ——》watch

ref是什么？

用来获取Dom，省去document.getelemnetById

Vue的自定义组件

VUEX的几种状态

VUEX的属性

vuex中mutations和action的区别

mutations都是同步操作

Vuex是单向数据流还是双向数据流？

单向：只能使用不能修改

Vuex怎么做持久化存储

Q:我Vuex有一个数据，比如是1，然后我在某一个组件用了，把1改成2，再次刷新页面，又变成1，是为什么？
Vuex本身不是持久化存储，怎么做？
1：存到cookie或者session（使用localStorage自己写）
2：使用vuex-persist插件

Vue权限

后台管理系统的权限控制与管理

请求控制

比如a用户是不能够操作该页面的按钮的，但是他通过f12调试把按钮改为可点击，如果我们不对这个请求进行处理，那么这个请求就会发送出去。怎么处理？-

• 4.1 菜单控制
  权限的数据需要在多组件之间共享， 因此采用vuex
  防止刷新界面， 权限数据丢失， 所以需要存在sessionStorage， 并目要保证两者的同步
• 4.2 界面控制
  路由的导航守卫可以防止跳过登录界面
  动态路由可以让不具备权限的界面的路由规则压根就不存在
• 4.3 按钮控制
  路由规则中可以增加路由元数据meta
  通过路由对象可以得到当前的路由规则以及存在此规则中的meta 数据
  自定义指令可以很方便的实现按钮控制
• 4.4 请求和响应控制
  请求拦截器和响应拦截器的使用
  请求方式的约定restful

项目打包

自定义组件，打包到npm中