前端面試問題集-2

Meow Meow Picture

目錄


CSS 的 class 和 ID 兩者有何差異

ID是唯一性的、不可重覆的。好處是選擇器效率極佳。
但是會自動變成全域變數。

做到好維護  id 给 JS 用，class 给 CSS 用。

描述 Reset 和 Normalize 的差異性？你會選擇哪一種，為什麼選擇它？

Reset 不管你有沒有用，統統重置成一樣的效果。

Normalize 保留有用的默認值，更正了常見的錯誤，擁有詳細的文檔。

描述 Floats 並解釋如何運作

讓 block 元素無視 float 元素，讓 inline 元素像流水一樣圍繞著 float 元素實現浮動佈局。

描述 z-index 並且描述堆疊內容 (stacking context) 如何形成？

當元素設置position值為relative / absolute / fixed後，z-index 才可使用。
z-index 值大的在值小的元素上面。

解釋 BFC (Block Formatting Context) 是什麼、如何運作的。

BFC（Block Formatting Context）直譯為「塊級格式化範圍」。

觸發 BFC

  • html 根元素

  • float 的值不為 none

  • overflow 的值為 auto、scroll 或者 hidden

  • display 的值為 table-cell、table-caption 和 inline-block 中的任何一個

  • position 的值不為 relative 和 static


有什麼方法來隱藏網頁的內容？

參考 https://kknews.cc/news/8onre.html


Opacity

設為 0 只能從視覺上隱藏元素。
而元素本身依然占據它自己的位置並對網頁的布局起作用。
內容會被讀屏軟體閱讀

Visibility

設為 hidden 將隱藏我們的元素。
如同 opacity 屬性，被隱藏的元素依然會對我們的網頁布局起作用。
元素在讀屏軟體中也會被隱藏。

Display

設為 none 確保元素不可見並且連盒模型也不生成。
使用這個屬性，被隱藏的元素不占據任何空間。
讀屏軟體也不會讀到元素的內容。
通過 DOM 依然可以訪問到這個元素。

Position

假設有一個元素你想要與它交互，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況。

（opacity 和 visibility 影響布局， display 不影響布局但又無法直接交互）。

在這種情況下，你只能考慮將元素移出可視區域。這個辦法既不會影響布局，有能讓元素保持可以操作。

採用的 CSS

.hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

這種方法的主要原理是通過將元素的 top 和 left 設置成足夠大的負數，使它在螢幕上不可見。

採用這個技術的一個好處（或者潛在的缺點）是用它隱藏的元素的內容可以被讀屏軟體讀取。

這完全可以理解，是因為你只是將元素移到可視區域外面讓用戶無法看到它。

你得避免使用這個方法去隱藏任何可以獲得焦點的元素，因為如果那麼做，當用戶讓那個元素獲得焦點時，會導致一個不可預料的焦點切換。

這個方法在創建自定義複選框和單選按鈕時經常被使用。

（用 DOM 模擬複選框和單選按鈕，但用這個方法隱藏真正的 checkbox 和 radio 元素來「接收」焦點切換）

請說明 relative、fixed、absolute 和 static 元件差異性？

  • relative: 可定義 top、left、bottom 與 right。

  • absolute: 以上層非 static 的父元素為定位基準。

  • fixed: 以目前瀏覽器視窗定位，固定在瀏覽視窗的固定位置，不隨滾動捲軸拉動。

  • static: 預設定位，無法定義 top、left、bottom 與 right。


寫高效的 CSS 時，有什麼要注意的？

  • 良好的命名習慣

  • 代碼縮寫

  • 利用CSS繼承

  • 使用多重選擇器

  • 適當的代碼注釋

  • 給你的CSS代碼排序

  • 保持CSS的可讀性

  • 選擇更優的樣式屬性值

    • 區別在於把 border: 0px，雖然在頁面上看不見，但按 border 預設值理解，瀏覽器依然對 border-width / border-color 進行了渲染，即已經佔用了記憶體。

    • 而把 border: none; 即沒有，瀏覽器解析 none 時將不作出渲染動作，即不會消耗記憶體。所以建議使用 border:none;。

    • 同樣的 display:none 隱藏物件瀏覽器不作渲染，不佔用記憶體。而visibility:hidden 則會。

  • 使用外部樣式表

    • 易於維護修改，更重要的是使用外部檔可以提高頁面速度，因為 CSS 檔都能在瀏覽器中產生緩存。

  • 避免使用CSS運算式（Expression）

  • 代碼壓縮


請列出您記憶中 display 屬性的全部值。

  • block
  • none
  • flex
  • grid
  • table
  • table-row
  • table-column
  • table-caption
  • table-cell
  • inline
  • inline-block
  • inline-table
  • inline-flex
  • inline-grid

請說明 inline 和 inline-block 的差異性？

inline

簡單來說就是兩個 inline 元素不會換行顯示，
可以設定的 CSS 樣式僅有 `margin-left`、`margin-right`、`padding-left`、`padding-right`

inline-block

裡面是inline，外面是block。兩個inline-block元素不會換行，CSS樣式皆可以設定。

CSS 中代表層疊。樣式的優先級

參考 https://www.minwt.com/webdesign-dev/css/17118.html


優先順序：

    style(!important) > ID > Class > 元素(Elements)

    最後的會蓋掉前方

為什麼會用 translate() 代替 absolute positioning

因為 absolute 會進行 CSS 計算 > 佈局 > 重繪過程，這個過程前兩步是消耗大量資源的。

參考來源

https://h5bp.org/Front-end-Developer-Interview-Questions/translations/chinese-traditional/

https://w3design.pixnet.net/blog/post/15210795-13%E5%80%8B%E8%AE%93css%E9%AB%98%E6%95%88%E6%95%B4%E6%BD%94%E7%9A%84%E6%96%B9%E6%B3%95