你要知道的前端面试题

前端

直接进入主题，我记录下面试会提到的问题。

CSS

能举例出，CSS 块级元素和内联元素有哪些

block/inline/inline-block

问：说下三者的意思，各自的不同点，及它们的盒模型，两个 inline-block 元素的 margin 怎么清除

clear float

问：清楚浮动有哪些方法

line-height

问：150% 和 1.5 区别，怎么给单行文本设置行高（分有高度和没高度两种）

margin

问：其缩写值的意思

1
2
3
4
5
6
7
8
9
10
11
12
.m1 {
  margin: 10px;
}
.m2 {
  margin: 10px 20px;
}
.m3 {
  margin: 10px 20px 10px;
}
.m1 {
  margin: 10px 20px 20px 10px;
}

position

问：有哪些值及它们的含义

background

问：background 位置定位怎么算的

display/visibility

问：两者区别，性能上有差异吗

selector/priority

问：浏览器怎么定义 CSS 选择器的优先级

额外问题

有一个 div 是浮动的，怎样能让它居中显示

JS

Prototype

问：原型链的原理

Scope

问：作用域有哪些，举例下

Closure

问：举例闭包的例子

instanceOf

问：person 是 Person的一个实例，person instanceOf Person 有可能等于 false 吗

1
2
3
4
5
6
7
var Person = function() {
  return 1;
}
Person.prototype.name = 'bb';

var person = new Person();
console.log(person instanceof Person);

For… in

问：用 for in 循环 person 要几次

1
2
3
4
var person = {
  age: 22,
  sex: '男'
}

This

问：下面的值是多少

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var say = function() {
  lucy.say();
};
var lucy = {
  name: 'lucy',
  say: function() {
    console.log(this.name)
  }
};
var mike = {
  name: 'mike',
  say: function() {
    lucy.say();
  }
}

lucy.say();
mike().say();
say();

typeof/==/===

1
2
3
4
5
6
7
8
9

// true 是怎么得出来的
'1000' == 1000 

var a = {
  xx: 1
};
// true 还是 false
'a' == a

== 和 === 的区别

额外问题

下面的 js 语句，它是怎么运行的

1
var person = new Person();

推荐书

最后推荐一本书你不知道的JavaScript（上卷）