快手前端面试题
1、HTML常见的行内元素?block inline-block inline的区别？
a,abbr,em,sub,sup,u,b,strike,span,select,input,br,i,textarea
block:独占一行，可以设置宽高，自动填满父元素高度，可以设置margin padding
inline-block：与其他行内元素占一行，可以设置宽高，可以设置margin padding
inline：不会独占一行，不可以设置宽高，可以设置margin padding
2、H5新增了哪些标签？input新增了哪些类型？
footer,header,section,nav,aside,article,video,audio,canvas,time,hgroup,figure,figcaption,mark,keygen,summary
text,password,button,submit,file,url,email,required,radio,checkbox,date,time,month,week,color
3、什么是BFC？什么情况会产生BFC？
BFC：块级格式化上下文，与外界元素互不影响，是一个隔离的独立容器
1、浮动元素 2、绝对定位 3、display：inline-block，table-cell，table-caption flex 4、overflow不为visible
4、css实现两列容器等高布局，要求元素实际占用高度以两列中最高的为准
1、子元素拥有相同高度：display：flex; flex:1;
2、左右元素浮动,padding-bottom:9999px,margin-bottom:-9999px,父元素：overflow：hidden
5、垂直水平居中的方法：
1、绝对定位。top:50%,left:50%,margin-left:-width/2,margin-top:-height/2
2、绝对定位。left：50%，top：50%，transform:translateX（-50%） translateY（-50%）;
3、flex布局。父元素：display:flex,justify-content:center,align-items:center
4、table-cell 父元素：display:table-cell,text-align:center,vertical-align:middle
5、绝对定位，margin:auto,top:0,bottom:0,left:0,right:0
6、写出程序运行结果？
typeof:Number,String,boolean,function,object,undefined
console.log（typeof（null））:object
console.log（typeof（undefined））:undefined
console.log（typeof（NAN））：undefined
console.log（NAN == undefined）:NAN is not defined
console.log（1+2+‘3’+4）：334
var str = '12345f';
console.log（typeof（str++））:Number
console.log（‘str’== new String（'str'））:false
代码段1：
var x=1,y=0,z=0;
var add=function(x){
return x = x+1;
}
y=add(x);
function add(x){
return x=x+3;
}
z = add(x);
console.log(x,y,z);
//输出1,2,2 原因：通过var声明的函数的引用不会被后面的函数改变代码段2：
var num=1;
var myObject ={
num :2,
add:function(){
this.num=3;
(function(){
console.log(this.num);
this.num=4;
})();
console.log(this.num);
},
sub:function(){
console.log(this.num);
}
}
myObject.add(); //1 3
console.log(myObject.num); //2
console.log(num); //1
var sub = myObject.sub;
sub(); // 1代码段3：
var i=0;
for(var i=0;i++<3;){
setTimeout(function(){
return function (){
console.log(i);
}
}(),0);
} //4 4 4
7、js中new操作符具体做了什么，用代码解释
例：var obj = new Base();
该步一共做了三件事：即 var obj = {}; obj.__proto__ = Base.prototype; Base.call(obj);
第一行，我们创建了一个空对象obj
第二行，我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象
第三行，我们将Base函数对象的this指针替换成obj。
8、合并两个升序数组为一个升序数组
var a=[1,3,4,5,7,8,9];
var b=[3,4,5,6,7,8,9];
var c= a.concat(b);
console.log(c);
for(var i=0;i
9、实现全选框联动
全选
a
b
c
要求:1、下边项全选或非全选时，全选框跟着动
2、操作全选框时，下边的项也跟着动
3、答案包括html结构和js代码，没有样式要求，使用vue和react会加分
请选择爱好：
跳舞
跳水
跳棋
跑步
全选/取消
function DoCheck()
{
var ch=document.getElementsByName("choose");
if(document.getElementsByName("allChecked")[0].checked==true)
{
for(var i=0;i