2019年最全前端面试题及答案(一)

一.写出5个h5新增标签及css3新增属性？

新增标签：canvas，video，audio，main，nav，footer,header;

新增属性：css3划分为模块

选择器，如： ：root， div:not("p"), p:empty, input:disable, input:checked

框模型

背景和边框：如：background-clip, background-size, background-origin, border--radius, box-shadow, border--image;

文本效果 如：text-shadow, word-break, text-outline;

2d/3d的转换 如 transform, transform-origin, transform-style, perspective

动画 如 @keyframes, animation ......

多列布局 如 column-count, column-gap,column-rule ......

用户界面 如 resize box-sizing outline-offset ....

二、写出行内标签，块级标签，空标签？

行内：span i em b a sup sub;

块级：div p ol li ul h1-h6 dd dt dl

空元素： br input img link hr

三、画一个盒子模型?

四、px和rem区别？

px是页面按照精确像素展示的绝对单位；rem是相对根节点的字体大小计算的相对单位；

五、flex布局左右固定，中间自适应？

.fater{
 height: 500px;
 display: flex;
 background: #b663af;
}
.son{
 width: 100px;
 height: 100px;
}
.a1{
 background: #000;
}
.a2{
 flex-grow: 1;
 background: #ff7985;
}
.a3{
 background: #88ff7d;
}

<div class="fater">
 <div class="son a1"></div>
 <div class="son a2"></div>
 <div class="son a3"></div>
</div>

六、冒泡原理及阻止方法？

在DOM事件流中，有两种事件模型，一种是事件捕获，一种是事件冒泡；事件冒泡是从事件目标开始，依次向上冒泡，直到页面的最上一级标签为止。

阻止方法：e.stopPropagation();或者在事件函数中return false;

七、es6有哪些特点？

a,箭头函数；函数的快捷写法，省略了function，有时省略return关键字，继承上下文的this的关键字；

b,新增声明变量的关键字let,const;

c,引进了class概念，更接近传统语言写法；

d,字符串模板简单了，比如用反引号来作为起始结尾，$()括号中写变量；例var num=1；console.log(`结果是${num}`);

八、es6写一个类和继承；

class Person{ //person类
 constructor(name,dd){
 this.name=name;
 this.dd=dd;
 }
 showName(){
 return this.name;
 }
 _Bb(){
 return this.dd;
 }
}
class Aa extends Person{
 //Aa继承父类Person方法;
}
 var obj1 = new Person('小琪琪1','111');
 var obj2 = new Aa('小琪琪2','222');
 console.log(obj1.showName());
 console.log(obj1._Bb());
 console.log(obj2.showName());

九、写一个方法判断一个对象是不是数组？

a; var blo=Array.isArray([1, 2, 3]);
 console.log(blo);
b; var blo2=Array.prototype.isPrototypeOf([1, 2, 3]);
 console.log(blo2);
c; var blo3=[1, 2, 3] instanceof Array;
 console.log(blo3);
d; var blo4=Object.prototype.toString.call([1, 2, 3]);
 console.log(blo4);

 

十、用正则写一个首位是字母，后7位是任意的表达式？

var reg=/^[a-zA-Z]{1}[\w]{7}$/;
console.log(reg.test('a1s19s_1'));