ES6部分
1.let const var 区别
- 1.let const 具有块级作用域,不存在变量提升
- 2 const是常量,const 定义的基本数据不能改变,但是定义的对象可以通过对象的方法去添加删除.
- 3.let 在统一作用域下面不能重复声明
- 4.var 具有跨级作用域,具有变量声明的提升
- 5.var可以在声明的上面访问变量,而let有暂存死区,在声明的上面访问变量会报错
2.使用箭头函数需要注意什么
1.箭头函数的this不是指向window,而是理他最近的父级作用域(指向是可变的)
3.怎么改变箭头函数中this的指向
call apply bind的区别
1.call apply接受参数的方式不一样,apply接收多个参数组成的数组,call接受的时候若干个参数的列表.
2.bind:不立即执行。而apply、call 立即执行。
bind方法是直接返回一个新的函数,需要手动去调用才能执行。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7Jn5HYZ-1630144418153)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210823152034043.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BqHlWUzm-1630144418154)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210823152053208.png)]
4.模板字符串,模板对象
${} ``
5.模块的导入导出
export const a
import {a} from “…/…/”
export default a
import a from “…/…/”
使用export 直接导出,导入的时候要加{} ,可以导出多个,导入多个
使用export default 导出,只能导出一个,导入是不需要{}
6.for…of for…in 两者之间的区别
for…in 可以遍历数组,对象.遍历数组的时候输出的是元素的索引,遍历对象的话输出的是对象的键名
for…of 不能遍历对象,会报错,遍历数组的时候输出的是数组的值
7.解构赋值
应用:实现两个变量的值的交换
let a = 1;let b = 2; [a,b] = [b,a];
8.展开运算符
…
9.promise的应用
1.什么是promise
Promise是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理、强大
2.如何使用promise
3.promise有哪些实例方法
1.Promise.all()
Promise.all
方法接受一个数组作为参数,p1
、p2
、p3
都是 Promise 实例
p
的状态由p1
、p2
、p3
决定,分成两种情况(1)只有
p1
、p2
、p3
的状态都变成fulfilled
,p
的状态才会变成fulfilled
,此时p1
、p2
、p3
的返回值组成0数组,传递给p
的回调函数。(2)只要
p1
、p2
、p3
之中有一个被rejected
,p
的状态就变成rejected
,此时第一个被reject
的实例的返回值,会传递给p
的回调函数。.Promise.race()
只要
p1
、p2
、p3
之中有一个实例率先改变状态,p
的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p
的回调函数4.promise的特点
- 对象的状态不受外界影响。
Promise
对象代表一个异步操作,有三种状态:pending
(进行中)、fulfilled
(已成功)和rejected
(已失败)。- 一旦状态改变,就不会再变,任何时候都可以得到这个结果
10.Set Map(应用在哪些地方)
11.Promise SetTimeout async/await的区别一级执行顺序
1.事件循环中分为宏任务队列和微任务队列
用来解决多层嵌套的回调方法
2.其中setTimeout的回调函数放到宏任务队列里,等到执行栈清空以后执行
3.promise.then里的回调函数会放到相应宏任务的微任务队列里,等宏任务里面的同步代码执行完再执行
4.async函数表示函数里面可能会有异步方法,await后面跟一个表达式
5.async方法执行时,遇到await会立即执行表达式,然后把表达式后面的代码放到微任务队列里,让出执行栈让同步代码
微任务>宏任务
微任务:then promise.then,proness.nextTick
宏任务:Promise settimeout setInterval
12.Promise构造函数是同步执行还是异步执行,那么 then 方法呢?
promise构造函数是同步执行的,then方法是异步执行的
13 .promise有几种状态,什么时候会进入catch?
三个状态:pending、fulfilled、reject
两个过程:padding -> fulfilled、padding -> rejected
当pending为rejectd时,会进入catch
14.普通函数和箭头函数的区别
js部分
# 1.JS的基本数据类型和引用数据类型有哪些,两者区别
基本数据类型->string、number、Boolean、null、undefined、symbol
引用数据类型->array、object、function
基本数据类型是保存在栈内存中,操作的是值,改变源数据不会影响新的变量
引用数据类型保存在堆内存中,操作的是地址,改变其中一个会影响另一个
引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。
2.数据类型中为假的有哪些
false undefined 0 NaN 空字符串 null
3.null和undefined的区别
Null:代表空对象指针。现在没有,将来可能会有
undefined:空,未定义。现在没有,将来也不会有(Js中独有的数据类型)
4.检测数据类型的几种方式,
typeof、instanceof、constructor、Object.prototype.toString.call()
typeof只针对基本数据类型,遇到引用数据类型是不起作用的(无法细分对象)都是Object
typeOf 可以用来判断 function string number boolean undefined
var arr = { name:"john"}; // object var arr = ["语文","数学"]; // object function Person() {}; // typeof(Person) => function var arr = '我是字符串' ; // string var arr = 66 ; // number var arr = true ; // boolean var arr = new Person(); // object var arr = undefined; // undefined var arr = null; // object var arr = /^\d{5,20}$/; // object console.log( typeof(arr) );
instanceof用来判断对象和函数,不适合判断字符串和数字,
可以用来判断Object array function 正则
a instanceof B 判断A是不是B的实例 var arr = '我是字符串' ; // console.log( arr instanceof String ) => false var arr = 66 ; // console.log( arr instanceof Number ) =>false var arr = true ; // console.log( arr instanceof Boolean ) =>false var arr = ["语文","数学"]; // console.log( arr instanceof Array ) =>true var arr = { name:"john"}; // console.log( arr instanceof Object ) =>true var arr = function Person(){}; //console.log(arr instanceof Function)=>true var arr = undefined; // console.log(arr instanceof Object)=>false var arr = null; // console.log(arr instanceof Object)=>false var arr = /^\d{5,20}$/; // console.log(arr instanceof RegExp)=>true
constructor是Object其中的一个属性。默认指向实例的构造函数
通过Object.prototype.toString方法,判断某个对象值属于哪种内置类型
var arr = '我是字符串' ; //[object String] var arr = 66 ; //[object Number] var arr = true ; //[object Boolean] var arr = ["语文","数学"]; //[object Array] var arr = { name:"john"}; //[object Object] var arr = function Person(){}; //[object Function] var arr = undefined; //[object Undefined] var arr = null; //[object Null] var arr = /^\d{5,20}$/; //[object RegExp] console.log( Object.prototype.toString.call(arr) );
5.innerHTML和innerText区别
innerHTML可以获取结构和文本
innerText只获取文本内容
6.数组常用的一些方法有哪些
push()向数组末尾添加数据
pop()删除数组最后一项
unshift()向数组首位添加新内容
shift()删除数组的第一项
slice()按照条件查找出其中的部分内容
splice()对数组进行增删改
join()用指定的分隔符对数组拼接
concat()用于连接两个或多个数组
indexOf()/lastIndexOf()当前值在数组中第一次/最后一次出现的位置索引
includes()判断一个数组是否包含指定的值
sort()对数组进行排序
reverse()把数组倒过来排列
forEach()循环遍历数组每一项
7.重绘和回流(重排)区别,什么情况会触发重排和重绘
### 什么是重绘
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
#### 什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。
当页面元素(宽高,位置)发生改变,回导致页面重排,浏览器会根据新位置进行重新渲染
回流必将引起重绘,而重绘不一定会引起回流。重绘相对于回流性能消耗较低
任何改变用来构建渲染树的信息都会导致一次重排或重绘
比如添加、删除、更新DOM节点,通过display: none隐藏,调整样式属性,调整窗口大小,滚动等等
8.请解释什么是暂时性死区
let 和 const 声明的变量不存在变量提升,其作用域都是块级作用域,凡是在声明变量之前使用变量就会报错,
所以,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”
9.如何添加HTML元素的事件,有几种方法
标签之中直接添加 οnclick=“fn()”
JS添加 btn.onclick = method
绑定事件 obj.addEventListener(‘click’, method, false)
10.什么是闭包,有什么优缺点
在Js中当函数套函数,子函数使用了父函数的参数或者变量,并且子函数被外界所使用(没有释放),
此时父函数的参数和变量,是不会被浏览器垃圾回收机制立马收回,这个时候父级形成了闭包环境。
优点:
保护—闭包会形成私有作用域,保护里面的私有变量不受外界干扰
存储—闭包可以把父函数的参数或变量存储起来
缺点:
相对于普通函数要消耗内存,闭包使用不当将会在IE(IE9之前)中造成内存泄漏
11.什么是原型,什么是原型链,两者关系
我们每声明一个对象的时候,他都存在一个内部属性prototype 这个prototype就是这个对象的原型
原型(prototype):函数自带的属性,函数的实例化对象找不到某个属性或者方法,一定会去构造函数的原型下去找
原型链(proto):实例化对象身上自带一个属性
原型关系链:函数的实例化对象找不到某个属性或方法,一定会去构造函数的原型下去找,如果还没有会去原型下的原型链查找,直到找到Object.prototype为止
两者关系:实例化对象的原型链 === 构造函数的原型
12.简述this不同情况下的指向问题
1)全局下的this是window
2)单纯的函数名+括号执行,this是window
3)匿名函数自执行,this是window
4)定时器中的this是window
5)事件触发,触发谁this就是谁
6)对象方法中,.前面是谁 this就指向谁
7)构造函数中this是实例化对象
8)严格模式下this是undefined
9)箭头函数中this指向上一级
10)箭头函数中this暴露在外面就指向window
13.浅拷贝和深拷贝,实现的几种方式
浅拷贝只复制某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存
深拷贝会开辟一个新的栈,新对象跟原对象不共享内存,修改新对象不影响原对象
简单来说假如B复制了A,当修改A时候B如果跟着改变就是浅拷贝,B没有改变则为深拷贝
浅拷贝实现方式:
Object.assign()、Array.prototype.concat()、Array.prototype.slice()
深拷贝实现方式:
JSON.parse(JSON.stringify())、手写递归,$.extend()
Object.assign({},“要拷贝的对象”) 能实现深拷贝
对象和数组只有一层是 扩展运算符可以实现深拷贝
数组的合并 a.concat(b)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vzrPmYtO-1630144418156)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210823150350761.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I1iIoPVu-1630144418157)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210823150607209.png)]
14.什么时候会用到闭包
15.什么是重绘,什么是回流
什么是回流?
当一个元素自身的宽高,布局,显示或隐藏,或元素内部的文字结构发生变化,导致需要重新构建页面的时候,就产生了回流
什么是重绘?
当一个元素自身的宽高,布局,及显示或隐藏没有改变,而只是改变了元素的外观风格的时候,就产生了重绘
什么时候会进行回流?
1.添加或者删除可见的DOM元素的时候
2.元素的位置发生改变
3.元素的尺寸发生改变
4.内容改变
5.页面第一次渲染的时候
什么时候会进行重绘?
列举一些相关的CSS样式:color、background、background-size、visibility、box-shadow
16.防抖和节流
防抖和节流都是为了解决一些频繁触发的事件而做出的不同的操作
防抖:就是在触发事件后n秒内函数只能执行一次,如果在n秒内函数又被触发了,那就会重新计算函数执行时间,()
function defounce(fn,delay){ var t=null return function(){ if(t){ clearInterval(t) } t=setTimeout(()=>{ fn(this,[...arguments]) },delay) } }
节流: 是连续被触发的时间在n秒内只执行一次,函数执行的时间间隔是相同的
function throttle(fn,delay){ var begin=0 return function(){ var curtime=new Date().gettime() if(curtime-begin>delay){ fn.apply(this,[...arguments]) begin=cur } } }
17.arguments是什么,特性
当调用函数的时候,传入的实参数量大于函数定义时的形参数量,这种情况下是没办法直接获得未命名值的引用(实参比形参多)。这个时候可以通过arguments来获取到所有的实参
function fun(x,y){ console.log(arguments); } // arguments 就是函数的所有实参 // 形参 形式上的参数 fun('tom',[1,2,3],{name:"arry"})
注意: arguments是伪数组,除了length属性之外数组的其他属性,arguments几乎是没有的!
最后还需要注意一点:ES6中箭头函数里是无法使用arguments的!!!
箭头函数的arguemnts 是父级作用域的arguemnts。
所以看箭头函数有没有,就看箭头函数的父级作用域有没有
Vue部分
1.对vue的理解,vue有什么特点
1.vue是一款MVVM框架,基于双向绑定数据,当数据发生变化时候,vue自身会进行一些运算
2.特点:双向数据绑定,数据驱动.组件化,模块友好
2.简述Vue双向数据绑定的原理
主要是通过Object对象的defineProperty属性,重写data的set和get函数来实现的,实现对data数据的监听
vue是通过数据劫持的方式来做数据绑定,最核心的方法就是通过Object.defineProperty()来实现对属性的劫持
在设置或者获取的时候我们就可以在get或者set方法里加入其他的触发函数,达到监听数据变动的目的
3.什么是mvvm
MVVM是Model-View-ViewModel的缩写
Model层代表数据模型
View代表组件视图,负责将数据模型转化成UI展现出来
ViewModel是一个同步 View 和 Model 的对象(双向绑定)
在MVVM中,View和Model之间并没有直接的联系,而是通过ViewModel进行交互,
Model和ViewModel之间的交互是双向的,因此 通过视图操作数据,也能通过数据操作视图
4.说一下vue的生命周期,当使用keep-alive属性时,会增加哪两个生命周期
1.befoeCreate created beforemount mounted beforeupdate updated beforeDestroy destoryed
2.在被keep-alive包含的组件/路由中,会多出两个生命周期的钩子:
activated 与 deactivated
5.列举vue的几种常用指令
v-if、v-show、v-for、v-on、v-bind、v-model、v-once
6.vue中v-if和v-show的区别
v-if和v-show都是用来控制元素的渲染
v-if是根据后面数据的真假,来判断DOM的添加删除等操作
v-show只是在修改元素的css样式(display属性值)
v-if如果初始渲染条件为真,就渲染,反之就不渲染
v-show不管初始条件是否为真,都会被渲染
v-if有更高的切换消耗,不适合做频繁的切换
v-show有更高的初始渲染消耗,适合做频繁的切换
7.vue中key值的作用
key的作用主要是为了更高效的更新虚拟dom,原理就是vue在patch的过程中通过key可以精准判断两个节点是否是同一个,从而避免频繁的更新不同的dom元素,减少dom的操作量,提高性能
使用key,vue会基于key的变化重新排列元素顺序,并且移除key不存在的元素
key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的
8.组件中data为什么是函数
如果data是一个对象,根据js Object是引用数据类型,这样没复用一次组件,每个组件的data都是指向内存的同一个地址,一个组件内数据改变其他也会被改变的
data是一个函数,复用组件时会开辟一个独立的对象,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响
JavaScript只有函数构成作用域(注意理解作用域,只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。
不是必须是函数的,也可以是对象的,源码中最后过滤出来的就是对象,写函数的原因是因为保证了这个对象是独立的,如果可以保证你写的对象是唯一的,不会被别的地方引用到,也可以写对象不用谢函数
9.vue中computed和watch的区别
computed是计算属性
1.支持缓存,只有依赖数据发生改变,才会重新进行计算
2.不支持异步,当computed内有异步操作时无效,无法监听数据的变化
3.computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过的数据通过计算得到的
4.如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
5.如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
watch是侦听属性
1.不支持缓存,数据变,直接会触发相应的操作;
2.watch支持异步;
3.监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
4.当一个属性发生变化时,需要执行对应的操作;一对多
computed能够监听vue数据上的变化,页面上来就执行一次,每改变一次数据就又触发,在操作数据的时候,会派生出另一个事情
watch当指定数据发生变化时候触发。一开始不会触发,只有指定的数据发生变化就又触发一次
watch可以deep深度添加,computed不可以
10.说一下vue组件之间的传递
1.父级传递子级:
首先在子组件上加一个v-bind:自定义属性,等于父级的数据,子组件通过props方法接收数据
2.子级传递父级:
在子组件上绑定一个自定义事件,并且传入父级的“事件”处理函数
在子组件内部使用 e m i t 监 听 这 个 自 定 义 事 件 , t h i s . emit监听这个自定义事件,this. emit监听这个自定义事件,this.emit(‘自定义事件名’,参数)
3.兄弟组件之间传递
eventbus
this. e m i t ( ) 去 触 发 t h i s . emit()去触发 this. emit()去触发this.on()去接收
4.this.$refs.属性名可以获取到组件的实例
11.v-for v-if能一块使用吗 why
当它们处于同一节点,
v-for
的优先级比v-if
更高,这意味着v-if
将分别重复运行于每个v-for
循环中,将会影响速度,尤其是当之需要渲染很小一部分的时候。
12 .vue页面在加载父子组件的时候生命周期执行顺序
加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated父组件更新过程
父beforeUpdate->父updated销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
13.vue中 r o u t e r 和 router和 router和route区别
$router 相当于是路由器,管理各个路由对象之间的跳转
常用方法:this. r o u t e r . p u s h ( ) t h i s . router.push() this. router.push()this.router.replace() this.$router.go()
r o u t e 是 路 由 对 象 , 通 过 t h i s . route是路由对象,通过this. route是路由对象,通过this.route可以访问到相对应的路由信息
params query path name
14. vue路由跳转传参的几种类型
this.$route.push(“xxxxx”)
this.$route.push(name:“xxx”,params:"")
相当于post请求,传递的参数不会跟在url后面,可以通过this,$route.params()获取到参数
this.$route.push(path:"",query:"")
相当于get请求,传递的参数会跟在url后面,可以通过this.$route.query()获取
path 和params不能同时传递 ,会忽略params传递的参数
15.Vue watch的用法
1.watch对应一个对象,建是观察值的表达式,值是相应的回调方法,值可以是方法名,可以是对象
如果我们想让值最初时候watch就执行就用到了
handler
和immediate
属性watch:{ example0(curVal,oldVal){ console.log(curVal,oldVal); }, example1:'a',//值可以为methods的方法名 example2:{ //注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象 handler(curVal,oldVal){ console.log(curVal,oldVal) }, deep:true } }, methods:{ a(curVal,oldVal){ conosle.log(curVal,oldVal) } }
16.Object.defineProperty和Proxy区别
// vue2.0的响应式 let p={} //添加新属性的时候捕获不到,删除已存在的也捕获不到 Object.defineProperty(p,"name",{ configurable:true, get(){ console.log("有人读取name时,我会被调用"); return person.name }, set(value){ console.log("有人修改name是,我会被调用"); person.name=value } })
// vue 3.0的响应式 // proxy() // 第一个参数 p代理的目标 // 第二个参数 对代理对象的操作,不能为null,可以设置{} // p映射person // 代理对象 目标对象 const p = new Proxy(person, { get(targar,propName) { // target 是指目标对象,property 是被获取的属性名 console.log("读取了p的某个属性",targar,targar); return targar[propName] }, set(targar,propName,newValue) { console.log("修改了p的某个属性",targar,targar,newValue); targar[propName]=newValue }, defineProperty(targar,propName){ console.log("删除了p的某个属性",targar,targar,newValue); return delete targar[propName] } })
Proxy的优势如下:
Object.defineProperty需要通过对对象的遍历去做出属性的改变,不能新增属性,或删除属性
1.Proxy可以直接监听对象⽽⾮属性 ,增删改查都可以。
2.Proxy可以直接监听数组的变化 。
3.Proxy有多达13种拦截⽅法,不限于apply、ownKeys、deleteProperty、has等等是 Object.defineProperty 不具备的 。
4.Proxy返回的是⼀个新对象,我们可以只操作新的对象达到⽬的,⽽ Object.defineProperty 只能遍历对象属性直接修改
# 17.你对Vue项目进行了哪些优化
不在模板里面写过多表达式
循环调用子组件时添加key
频繁切换的使用v-show,不频繁切换的使用v-if
尽量少用float,可以用flex
按需加载,可以用require或者import()按需加载需要的组件
18.怎么在vue中使用动画
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RKJU7N9f-1630144418158)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210821143223920.png)]
19.nextTick的理解()
为什么说在this.$nextTick里面可以拿到dom更新后的值呢?
一般来说nextTick,就是在dom渲染完了之后才会执行
- 执行完当前宏任务script,立即执行微任务
- 微任务执行完毕后进行页面渲染
- 页面渲染完毕,开始执行$nextTick
20.vue中父组件向子组件传递数据,子组件为什么不能修改props数据
组件是可复用的,假设该子组件被复用了n次,当某一个组件意外地更改了其接受到的props数据 ----> 意味着,同时更改了父组件中相对应的属性值 ----> 意外地更改其它(n-1)个子组件中的 props数据,引起混乱
但有存在某些情况:必须对父组件传递过来的props进行转换处理,利用computed计算属性对数据进行处理。
21.介绍下什么是单页面应用
单页面 :指只有一个主页面的应用,一开始只需加载一次
js,css
等相关资源。所有的内容都包含在主页面,对每一个功能模块组件化。单页应用跳转,就是切换相关组件,仅刷新局部资源。
22. vue,小程序,uni-app的生命周期
vue: beforeCreate(创建前) created(创建后) beforeMount(载入前),(挂载) mounted(载入后) beforeUpdate(更新前) updated(更新后) beforeDestroy(销毁前) destroyed(销毁后) 小程序,uni-app: 1. onLoad:首次进入页面加载时触发,可以在 onLoad 的参数中获取打开当前页面路径中的参数。 2. onShow:加载完成后、后台切到前台或重新进入页面时触发 3. onReady:页面首次渲染完成时触发 4. onHide:从前台切到后台或进入其他页面触发 5. onUnload:页面卸载时触发 6. onPullDownRefresh:监听用户下拉动作 7. onReachBottom:页面上拉触底事件的处理函数 8. onShareAppMessage:用户点击右上角转发
23.uniapp进行条件编译的两种方法?小程序端和H5的代表值是什么?
通过 #ifdef、#ifndef 的方式 H5 : H5 MP-WEIXIN : 微信小程序
this.$nextTick()的作用,什么时候会使用到
this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来
css部分
1.如何通过CSS绘制一个三角形
https://github.com/noxussj/Interview-Questions/issues/16
width: 100px;
height: 100px;
border: 50px solid;
border-color: green transparent transparent transparent;
box-sizing: border-box;
2.谈谈你对CSS选择器以及优先级的理解
!important > 内联样式 > ID选择器 > 类选择器 > (标签选择器、伪类选择器、属性选择器)
3.CSS和CSS3有什么区别?
css3新增了一些新的特性
border-radius
border-boxshadow
border-image
transform
box-sizing
display
4.怪异盒模型和标准盒模型区别
可以把所有HTML标签都理解成一个盒子模型
盒子模型主要由4个部分组成:content、padding、border、margin
标准盒模型(W3C盒模型) content-box
- 盒子的尺寸 = content
怪异盒模型(IE盒模型) border-box
- 盒子的尺寸 = content + padding + border
5.用css3可以实现哪些过渡效果
动画 animation:动画名字 动画时间 动画方向
@keyframs 名字{ from :{left:0px}, to:{left:200px}}
过渡,transition(一般跟在hover后面)
转换 transform:
转换函数 :位移 translate
缩放 scale
旋转 rotate
6.水平垂直居中的几种方式
利用绝对定位.box{ position:absolute; left:0; right:0; top:0; bottom:0; margin:auto }利用弹性布局.box{ position:flex; justify-content:center; align-item:center;}