2019前端面试题总结之三：某公司中级面试题

一、选择题

1.要动态改变层中的内容可以使用的方法有？

• A：innerHTML
• B：innerText
• C：通过设置层的隐藏和显示来实现
• D：通过设置层的样式属性的display属性

// 答案： A,B，注意动态改变，内容

2. 看下面的代码，给出输出的结果？

for (var i = 1; i <= 3; i++){
   
  setTimeout(function(){
   
    console.log(i);
  },0)
}
// 答案： 4 4 4 ，因为setTimeout是异步函数

推荐参考链接1 推荐参考链接2

3. 看下面代码，给出输出结果？

var a = 1;
function foo() {
   
  if(!a){
   
    var a = 2
  }
  alert(a);
}
foo()

• A：1
• B：2
• C：undefined
• D：报错

答案是：B，

涉及到的知识点有作用域，变量提升。

因为var是函数级作用域，foo函数中出现var a=2 的存在，

就默认在函数内顶端 声明var a；此时这个a没有被赋值所以是undefined；

然后执行if(!a)等价于!undefined肯定是true。然后给a赋值为2.

所以打印的是2。

二、问答题

1. 请用css实现水平居中，HTML结构如下

<div class="wrapper">
  <div class="content"></div>
</div>

答案：

/*第一种通过定位和位移（未知子模块宽高）或者margin（已知子元素宽高）*/
html,
body,
.wrapper{
   
  width:100%;
  height:100%;
}
.content{
   
  width:30%;
  height:30%;
  position:absolute;
  top:50%;
  left:50%;
  transform:tranlate(-50%,-50%);
}
/*或者*/
.content{
   
  width:200px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-100px;
}
/*第二种通过flex布局*/
.wrapper{
   
  width:100%;
  height:500px;
  display:flex;
  flex-flow: row nowrap;
  /*align-items 定义子元素交叉轴也就是垂直方向的对齐方式*/
  align-items:center;  
  /*justify-content 定义子元素水平方向的对齐方式*/
  justify-content:center;