前端校招字节跳动面试 第四篇

面试官上来就问了一些比较简单的问题（除了自我介绍和项目经历）

1、块级元素和行内元素分别有哪些？

很简单，但是不容易答好，就跟问API一样，不过既然问了，还是要记一下：用分类法记住好

块级元素

行内元素

2、块级元素和行内元素的区别？

• （1）行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行，水平方向排列。
  块级元素各占据一行（默认宽度是他本身父容器的100%，与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
• （2）块级元素内可以包含行内元素，行内元素不能包含块级元素，只能包含文本或其他行内元素。
• （3）块级元素和行内元素属性的不同，主要是盒模型属性上：行内元素设置width无效，height无效（可以设置line-height），margin上下无效，padding上下无效。

3、块级元素、行内元素的转换？

• display：block；转换为块级
• display：inline；转换为行内

4、行内元素如何设置宽高？

• （1）display：block；
• （2）display：inline-block；
• （3）float：left；隐形的将行内元素进行了转化，相当于display：block；float：left；

5、js中如何判断数据的类型？

（1）typeof

缺陷：

1.不能判断变量具体的数据类型比如数组、正则、日期、对象，因为都会返回object,不过可以判断function，如果检测对象是正则表达式的时候,在Safari和Chrome中使用typeof的时候会错误的返回"function",其他的浏览器返回的是object.

2.判断null的时候返回的是一个object，这是js的一个缺陷,判断NaN的时候返回是number

**（2）instanceof **

可以用来检测这个变量是否为某种类型，返回的是布尔值，并且可以判断这个变量是否为某个函数的实例，它检测的是对象的原型

let num = 1
num instanceof Number // false

num = new Number(1)
num instanceof Number // true

明明都是num，而且都是1，只是因为第一个不是对象，是基本类型，所以直接返回false，而第二个是封装成对象，所以true。

这里要严格注意这个问题，有些说法是检测目标的__proto__与构造函数的prototype相同即返回true，这是不严谨的，检测的一定要是对象才行，如：

let num = 1
num.__proto__ === Number.prototype // true
num instanceof Number // false

num = new Number(1)
num.__proto__ === Number.prototype // true
num instanceof Number // true

num.__proto__ === (new Number(1)).__proto__ // true

instanceof只能通过true或者false来判断，不能直接看出来是什么类型

此外，instanceof还有另外一个缺点：如果一个页面上有多个框架，即有多个全局环境，那么我在a框架里定义一个Array，然后在b框架里去用instanceof去判断，那么该array的原型链上不可能找到b框架里的array，则会判断该array不是一个array。

（3）constructor

constructor是prototype对象上的属性，指向构造函数。根据实例对象寻找属性的顺序，若实例对象上没有实例属性或方法时，就去原型链上寻找，因此，实例对象也是能使用constructor属性的。

如果输出一个类型的实例的constructor，就如下所示：

console.log(new Number(123).constructor)
//ƒ Number() { [native code] }

可以看到它指向了Number的构造函数，因此，可以使用num.constructor==Number来判断一个变量是不是Number类型的。

（4）使用Object.prototype.toString.call(value) 方法去调用对象，得到对象的构造函数名。可以解决instanceof的跨框架问题，缺点是对用户自定义的类型，它只会返回[object Object]

6、盒子模型

参考立下flag）每日10道前端面试题-18 关于【盒模型】十问

7、如何实现三列布局？

三列布局，一般指两端固定宽度，中间宽度自适应的布局方式。
参考字节跳动：圣杯布局，有几种办法
当然，这个可以谈到grip，table

8、CSS实现三角形。