【译】你应该知道的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 的技术，以便尽快将内容呈现给用户。这是快速加载网页首屏的好方法。

这里面试官想了解一下您是否了解性能以及有关如何快速加载的新概念？