初級前端的面試之路（三）

如下若有錯誤的地方，歡迎各位前輩指點，謝謝！🙏

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，都是下週初給消息，也有一個下週的複試，但願會是好消息吧~ 今天下午的面試挺有感觸的，跟部門老大談了挺多，挺有收穫。 明天能夠休息一天，下週繼續加油 ~ 🆙🆙🆙