初级前端的面试之路（三）

如下若有错误的地方，欢迎各位前辈指点，谢谢！🙏

CSS 相关

postion 有哪些属性值并简单介绍一下

• relative 相对定位

  1. 相对定位不会影响元素自己的特性

  2. 不会脱离文档流

  3. 在没有偏移量的时候对元素没有影响

  4. 能够来提高层级。

• absolute 绝对定位

  1. 绝对定位可使元素彻底脱离文档
  2. 使内联元素能够支持设置宽高
  3. 使块元素在不设置宽高的时候由内容撑开高度
  4. 是相对于最近一个有定位的父元素（relative、absolute、fixed）偏移
  5. 能够来提高层级

• fixed 固定定位

  1. 相对于浏览器窗口进行定位

• static 默认值

• sticky 粘性定位

  1. 在滚动区域内，效果相对于 relative
  2. 滚动超出目标区域后，效果至关于 fixed，会被固定在目标位置

• inherit 继承

link 和@import 有什么区别？

1. @import 是 CSS 提供的语法，只有导入样式表的做用；而 link 是 HTML 提供的标签，不只仅能够加载 CSS 文件，还能够定义 rel 等属性，兼容性也要好不少
2. 在加载页面的时候，link 标签引入的会被同时加载，而 @import 引入的 CSS 会在页面加载完毕以后被加载

介绍一下盒模型

首先，一个盒子有：content , padding ,border , margin ，咱们经常使用的有标准盒模型和怪异盒模型。

标准盒模型：

width 指的 content部分的宽度，height 指的是 content 部分的高度

怪异盒模型（IE 盒模型）：

width 指的 content + padding + border部分的宽度，height 指的是 content + padding + border 部分的高度

你对 line-height 的理解？

line-height，行高，指一行文字的高度，用来指定行间的距离，具体来讲是指两行文字之间 基线 的最小距离。

line-height 的值

• normal：默认值，约为 1.2，取决于 font-family
• 数字：会与当前字体的尺寸相乘来设置行间距
• 长度：设置固定的行间距
• %：与元素自身的字体大小有关，计算值是给定的百分比值乘以元素计算出的字体大小。
• inherit：从父元素继承 line-height 属性的值

line-height 能够产生高度吗？如何产生？

若是一个标签没有定义height属性，那么其最终表现的高度必定是由 line-height起做用。例如，当有一个 div 标签，若是没有为其设置height的时候，当咱们在 div 里面输入文字以后，这时 div 就会有一个高度，这个高度，其实就是 line-height。

缘由是由于，这个高度是由 line-boxes 产生的。（line-boxes不可见，其实就是用来包裹每行文字，每一行都会有一个 line-boxes）

为何要初始化 CSS 样式？

由于各家浏览器解析标签的规则不一样，为了保证显示效果的一致性，咱们须要对 CSS 样式进行初始化。

JavaScript 相关

四则运算符问题

console.log(10 + '20') 的打印结果是什么？

答案：'1020'

答这道题的时候，被本身蠢哭了...

这道题考察的是 + 云算法的特性，加法运算符有以下几个特色：

• 若是其中一方为字符串，那么就会把另外一方也转换成数字或者字符串
• 若是一方不是字符串也不是数字，那么会将它转换为数字或者字符串

10 + ‘20’ // '1020'
true + true // 2
1 + [2,3,4] // '12,3,4'
复制代码

为何 0.1 + 0.2 != 0.3

我遇到的题是：

console.log(0.1 + 0.2 === 0.3) 的打印结果是什么？ // false

由于 JS 采用 IEEE 754 双精度版本（64 位），其将 64 位分红了三段：

• 第一位用来表示符号
• 接下来的 11 位用来表示指数
• 其余的位数用来表示有效位

而且，0.1 在二进制中是无线循环的数字，这些无限循环的数字，JS 会利用浮点数标准对他们进行剪裁，因此 0.1 再也不是 0.1 了，而是0.100000000000000002，一样 0.2 在二进制中也是无线循环的，就变成了 0.200000000000000002

0.100000000000000002 === 0.1 // true
0.200000000000000002 === 0.2 // true
复制代码

所以，0.1 + 0.2 也就不等于 0.3 了，原生提供的 toFixed() 能够帮助解决

parseFloat((0.1 + 0.2).toFixed(10)) === 0.3 // true
复制代码

代码判断题

生命提高问题

如下代码会不会报错？若是不报错输出什么？为何？

var y = 10;
if(!(x in window)) {
  var x = 10;
} else{
  ++y;
}
console.log(x); // undefined
console.log(y);	// 11
复制代码

经过 var 声明的变量存在生命提高，因此 x in window 为 true，便不会对 x 进行等于 10 的赋值操做。

EventLoop问题

如下代码会不会报错？若是不报错输出什么？为何？

setTimeout(() => {
  console.log('a')
}, 0)
var p = new Promise(resolve => {
  console.log('b')
  resolve()
})
p.then(() => {
  console.log('c')
})
p.then(() => {
  console.log('d')
})
复制代码

打印顺序：b --> c --> d --> a

JS 在执行代码的时候，本质上就是往执行站里面放入函数。JS 解析代码会从上到下解析，当遇到异步代码的时候，会被挂起并放在 Task 队列里（异步队列），当执行栈为空的时候，就会去队列里面拿出须要执行的代码再放入到执行战中去执行。 其中，Task 队列有宏任务跟微任务之分，执行栈为空的时候，会先去微任务队列里去拿取代码，再去宏任务里面。

这周的面试所有结束了，也没有拿到 offer，都是下周初给消息，也有一个下周的复试，但愿会是好消息吧~ 今天下午的面试挺有感触的，跟部门老大谈了挺多，挺有收获。 明天能够休息一天，下周继续加油 ~ 🆙🆙🆙