【譯】你應該知道的5個CSS面試問題

該文章爲譯文， 這是原文地址。

1.什麼是 flex 佈局和 grid 佈局？分別在何時使用？

Flex 佈局和 grid 佈局都是建立網頁佈局的好方法。可是，面試官想知道的是二者的主要區別：它們具備哪些功能和更強大靈活的功能？以及應該在什麼時候使用？

Flex 佈局是 1D。這意味着使用 flex 佈局能夠操做行或列，但只能同時操做行和列中的任意一個。在 grid 佈局中，您能夠同時操做行和列。grid 佈局功能很是強大，由於它具備許多強大而有用的特性，這些功能將有助於簡化複雜佈局的開發和控制。

能夠經過 grid 進行大方向的佈局，使用 flex 進行具體內容的佈局。

這裏面試官想知道您是否知道佈局建立的不一樣技術以及它們之間的對比。

2.說明如何維護 CSS，假設您目前正在負責企業的實際項目。

管理大型項目中的 CSS 可能具備挑戰性。一種方法是使用預處理器，例如 SASS 或 LESS。二者都是出色的預處理程序，能夠很好地管理 CSS 文件。它們具備函數、變量、嵌套 CSS 等功能。這是避免樣式表衝突以及管理大型 CSS 文件的有效方法。

這裏面試官很想知道您是否具備實際管理 CSS 的經驗。以及，您是否定真考慮過這一點？

3. rem 和 em 有什麼區別？

rem 和 em 都是 CSS 單位。rem 表示 root-em。em 和 rem 之間的區別是，rem 從根元素獲取值，而 em 從父元素獲取值。這是致使二者徹底不一樣的緣由。

4.position fixed 和 sticky 之間的區別

當開發人員要開發複雜的佈局時，position是很是有趣的屬性。咱們很清楚什麼是 fixed，它將把元素"固定"到咱們聲明的位置。sticky的基本做用相似於position：relative，直到元素滾動到特定偏移量以上爲止，在這種狀況下它將變成position：fixed，致使元素"粘在"其位置，而不是滾動到視線以外。

這裏面試官想了解您對 position 的瞭解。position 是建立複雜佈局並以不一樣分辨率控制它們的最有趣的部分之一，這是一門藝術。

5.什麼是 critical CSS？

Critical CSS 是一種提取首屏中 CSS 的技術，以便儘快將內容呈現給用戶。這是快速加載網頁首屏的好方法。

這裏面試官想了解一下您是否瞭解性能以及有關如何快速加載的新概念？