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

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