css面试高配题
1.清楚浮动的方法
1.1 在标签结尾处加空div标签 clear:both；
1.2使用after伪类来清除浮动
.clearfix:after{ /*最简方式*/
content: '';
display: block;
clear: both;
}
/* 新浪使用方式
.clearfix:after{
content: '';
display: block;
clear: both;
height: 0;
visibility: hidden;
}
*/
.clearfix{ /*兼容 IE*/
zoom: 1;
}
1.3父级div定义 overflow:hidden；
2.过渡 transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)复制代码
3.动画 animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）复制代码
**4.形状转换 ** transform:适用于2D或3D转换的元素
rotate(30deg); translate(30px,30px); scale(.8); skew(10deg,10deg); rotateX(180deg); rotateY(180deg); rotate3d(10,10,10,90deg);
5.选择器
6.阴影 box-shadow: 水平阴影的位置 垂直阴影的位置 模糊距离 阴影的大小 阴影的颜色 阴影开始方向（默认是从里往外，设置inset就是从外往里）;复制代码
**7.边框 ** border-image: 图片url 图像边界向内偏移 图像边界的宽度(默认为边框的宽度) 用于指定在边框外部绘制偏移的量（默认0） 铺满方式--重复（repeat）、拉伸（stretch）或铺满（round）（默认：拉伸（stretch））;
8.背景 background-clip 制定背景绘制（显示）区域 background-origin background-size
1.（background-clip: border-box;）默认情况（从边框开始绘制） 2.（background-clip: padding-box;）从padding开始绘制（显示），不算border,，相当于把border那里的背景给裁剪掉！ 3.（background-clip: content-box;）只在内容区绘制（显示），不算padding和border，相当于把padding和border那里的背景给裁剪掉！
**9.反射 ** -webkit-box-reflect:方向[ above-上 | below-下 | right-右 | left-左 ]，偏移量，遮罩图片
**10.文字 **换行 语法：word-break: normal|break-all|keep-all;、语法：word-wrap: normal|break-word; 超出省略号 text-overflow:clip|ellipsis|string 文字阴影 语法：text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色。
11.颜色 rgba（rgb为颜色值，a为透明度） color: rgba(255,00,00,1);background: rgba(00,00,00,.5); hsla h:色相”，“s：饱和度”，“l：亮度”，“a：透明度” color: hsla( 112, 72%, 33%, 0.68);background-color: hsla( 49, 65%, 60%, 0.68);复制代码
12.渐变
13.Filter（滤镜）：黑白色filter: grayscale(100%)、褐色filter:sepia(1)、饱和度saturate(2)、色相旋转hue-rotate(90deg)、反色filter:invert(1)、透明度opacity(.5)、亮度brightness(.5)、对比度contrast(2)、模糊blur(3px)
14.弹性布局 Flex
15.栅格布局 grid
16.多列布局
17.盒模型定义 box-sizing:border-box的时候，边框和padding包含在元素的宽高之内！ box-sizing:content-box的时候，边框和padding不包含在元素的宽高之内！如下图
18.媒体查询 就在监听屏幕尺寸的变化，在不同尺寸的时候显示不同的样式！在做响应式的网站里面，是必不可少的一环！
2 js部分
防抖：
如下拉刷新，在规定时间内触发，如果没有超出规定时间会重新计算时间。起到防抖的作用。
节流：
在规定的时间内只会触发一次，如果连续操作不生效。
闭包：
全局变量和局部变量，局部变量不易访问到，闭包就是能够读取一个函数内部局部变量的函数就叫闭包。作用就是能访问局部变量，还有一个就是变量永远存在，所以这里会导致一个问题就是，内存泄漏，需要在使用后注意清除。
原型链：
所有函数都有原型，proto属性指向原型构造函数prototype一层层查找，最顶端是null
深拷贝
1粗暴的深拷贝，使用JSON.stringify和JSON.parse实现深拷贝
2.用递归的方式深拷贝，
3.一层深拷贝
①for循环拷贝
②Object.assign()实现一层深拷贝
③slice实现
④使用concat()方法
Vue常问面试题
父子组件传值
1props和attrs和$listeners(组件封装用的较多)
6provide[prəˈvaɪd]和inject[ɪnˈdʒekt]
(高阶组件/组件库用的较多)
vue生命周期
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
beforeCreate在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
created实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)属性初始化和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
data已经初始化。
beforeMount 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
data和el均已经初始化，此时el并没有渲染进数据，el的值为“虚拟”DOM的元素节点；
mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
此时el已经渲染完成并挂载到实例上
beforeUpdate 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
会更新当前组件数据，但未在页面渲染出来；
updated 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。*
会更新当前组件数据，并在页面渲染出来*
beforeDestroy 在实例销毁之前调用。实例仍然完全可用。
destroyed 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
2.钩子函数的应用场景
beforeCreate 可以在此时加一些loading效果，在created时进行移除.
created 需要异步请求数据的方法可以在此时执行，完成数据的初始化。
mounted 当需要操作dom的时候执行；也可以在此发ajax
updated 当数据更新要做统一业务处理的时候
vuex
state => 基本数据
getters => 从基本数据派生的数据 计算属性
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
调用vuex数据this.store.commit('setNum',num)
vue-router
跳转
this.router.push({path: '准去的路由地址'}，query:{'参数'：'参数Value'})不在url中显示
router.replace(location) 不会在浏览器中添加新的记录，
获取：
this.route.query