重慶大三女生剛學了兩個月前端面試實錄，這像不像剛學前端的你們，八股文一定要背熟

語言: CN / TW / HK
時間 2022-05-22 05:15:14
主題:

大家好，我是山月。這是我在 B 站的第45場模擬面試

本次的候選人大三，剛學前端幾個月，對於八股文還不是很熟練，在2022年的寒冬找到實習，需要再下一份苦工。

以下是面試記錄

影片版: 重慶大三女生剛學了兩個月前端面試實錄，這像不像剛學前端的你們，八股文一定要背熟

以下是簡歷大致內容:

簡歷

山月的面試問題記錄

候選人的面經

水平垂直居中

  • 彈性佈局和網格佈局對行內元素，塊級元素都適用 css .father { display: flex; /*或display: grid;*/ justify-content: center; align-items: center; }
  • 單行行內元素 line-height與height相同，text-align: center;
  • 多行的行內元素 image image

  • 塊級元素 css .father { position: relative; } .son { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); }

    1.使用相對定位，子元素的左上角原始是在螢幕左上角，使用left:50%,right:50%使子元素的左上角移到螢幕正中央，此時要使子元素垂直水平居中，需要把子元素向左和向上移動寬高的一半。 - 若寬高未知，子元素使用transform: translateX(-50%) translateY(-50%); - 若寬高已知（均為100px），子元素使用transform: translateX(-50px) translateY(-50px); 或者子元素使用margin-left: -50px; margin-top: -50px;

    2.對於寬高已知的子元素同樣也可以使用子絕父相，然後把子元素top,bottom,left,right都設為0,margin設為auto。

CSS變數

  • CSS變數可以訪問 DOM，可以建立具有區域性或全域性範圍的變數，使用 JavaScript 和媒體查詢來修改變數。var() 函式用於插入 CSS 變數的值。全域性變數可以在整個文件進行訪問使用，區域性變數只能在宣告它的選擇器內部使用。
  • :root宣告的是全域性變數，如果是一個自定義屬性用--作為字首，使用時比如: var(--blue)就和#1e90ff相等 css :root{ --blue: #1e90ff; } .father{ background-color: var(--blue); }
  • 使用CSS變數的好處：

    1.可維護性
    如果沒有CSS變數需要手動改變大量的屬性值，使用批量處理查詢和替換，可能會影響其他樣式規則。使用CSS變數只用改變定義時的值。

2.提高CSS可讀性
可以通過變數名判斷屬性內容 * 使用CSS變數要注意大小寫敏感，不要把長度的變數用於顏色屬性等。

CSS Modules

  • CSS Modules加入了局部作用域和模組依賴，保證某個元件的樣式而不會影響其他元件的樣式。
  • 一般使用webpack的css-loader實現CSS Modules，webpack配置中style-loader!css-loader?modules,在css-loader後新增查詢引數modules,表示開啟CSS Modules功能。
  • CSS Modules一些使用

1.CSS Modules產生區域性作用域，通過構建工具將類名編譯成一個雜湊字串，css和js都會同時編譯成唯一的雜湊字串。

2.CSS Modules使用:global(.className)的語法宣告一個全域性規則。凡是這樣宣告的class，都不會被編譯成雜湊字串。:local(.className)是區域性作用域寫法，和.className相同。

3.在webpack配置檔案裡可以實現定製雜湊字串的格式。

4.可以實現組合樣式，不是將設定背景顏色的程式碼放入了.title中，而是使用這兩個類，雜湊值裡面有這兩個值。 .bg-color { background-color: black; } .title { /* 這裡可以組合多個類 如：composes: bg-color bg1 bg2; */ composes: bg-color; color: #fff; }

5.輸入其他模組 /*another.css檔案中*/ .className { height: 200px; } .title { composes: className from './another.css'; } 6.定義變數 * @value blue: #0c77f8; * @value red: #ff0000; * @value green: #aaf200; >引入變數 * @value colors: "./colors.css"; * @value blue, red, green from colors;

三欄佈局

  • clac計算佈局 ``` css

//可以交換位置

* 定位佈局 css

//可以交換位置

* flex佈局 css

//注意中間位置不能換

```

事件委託

  • 就是事件代理，只指定一個事件處理程式，管理某一型別所有事件。 把一個元素的響應事件（click、keydown......）的函式委託倒另一個元素。
  • 事件流會經過三個階段：捕獲階段->目標階段 ->冒泡階段，事件委託在冒泡階段完成。事件委託會把一個或一組元素繫結到目標元素的外層元素身上，這樣點選目標元素會冒泡到外層元素觸發操作。
  • 使用場景:點選li標籤觸發操作，但給每個li分別繫結事件需要繫結很多次，事件委託就是給li的父元素ul繫結事件，可能還存在ul裡面其他元素冒泡觸發事件，這時候要判斷目標事件target的nodeName是不是li，如果是就觸發操作，這樣就只用繫結一次事件。 在刪除和新增批量元素時也儘量使用事件委託將事件繫結在外層父元素。
  • 適合事件委託的事件有： click , mousedown , mouseup , keydown , keyup , keypress

如何避免CSS樣式衝突

1.使用後代選擇器或子代選擇器，描述越多越細，優先順序越高，優先順序高的覆蓋優先順序低的描述。

2.改變CSS樣式順序，相同型別選擇器指定的樣式，後面的會覆蓋前面的。

3.使用css module和css scope都可以生成唯一屬性, css scope是在vue的style標籤上的，並不能完全避免，全域性如果有一個同名的類名仍然不能區分。

>4.使用BEM命名，元件內部元素的名字都加上元件名，並用元素的名字作為選擇器，即規定為：block-name__element-name--modifier-name，也就是模組名 + 元素名 + 修飾器名。BEM命名禁止使用子代選擇器，會使權重增大，如果需要後面的樣式覆蓋需要額外增加更多的選擇器，且命名紊亂。

reset css和normalize.css區別

  • Normalize 相對「平和」，注重通用的方案，重置掉該重置的樣式，保留有用的 user agent 樣式，同時進行一些 bug 的修復，這點是 reset 所缺乏的。
  • Reset 相對「暴力」，不管有沒有用，統統重置成一樣的效果，且影響的範圍很大，講求跨瀏覽器的一致性。

0.1+0.2不等於0.3

JavaScript中表示數只有number型別，整數和小數都用雙精度浮點數表示(64bit) * 符號位(1bit): 表示正負號 * 指數位(11bit): 表示次方數 * 尾數位(52bit): 表示精確度

0.1和0.2都不能用64位精確儲存，準確儲存它們的值位數要比64位長，但採用雙精度浮點數表示只能儲存64位，也就是實際儲存的不是0.1和0.2,只是與它們相近的值，所以最後不是0.1和0.2相加，也就不等於0.3。

山月對面經的個人意見

僅代表個人意見

  1. markdown 書寫水平需要提高一點點...
  2. 垂直水平居中問題，先答 flex 佈局，為使用之最廣泛的解決方案，再答 grid 佈局，體現自己對前沿(不算很前沿)css的瞭解，再答絕對定位+top+translate。其餘可先不答，除非面試官問。
  3. 三列布局中的一個答案還用到了 float，現在寫 css 很少用到 float 了，不宜放在第一個回答，回答還是以 flex/grid 為主

字幕

可對照字幕與影片進行快速瀏覽:

見 http://q.shanyue.tech/mock/220518.html#%E5%AD%97%E5%B9%95

本次面試記錄將收集在我的網站模擬面試系列中，其中收集了我所有的模擬面試記錄及如何預約面試。

模擬面試系列

「」