你应该知道的 5 个 CSS 面试问题

1. 什么是 flex 和 CSS grids？什么时候使用哪个？

2. 解释一下你如何维护你的 CSS。假设你正在处理企业项目。

3.rem和em有什么区别？

4. 解释position fixed和sticky的区别

5.什么是关键 CSS？

1. 什么是 flex 和 CSS grids？什么时候使用哪个？

答：Flex 和 CSS 网格都是创建网页布局的好方法。然而，主要的区别在于：它们各自有哪些功能？哪个更强大、更灵活？以及何时应该使用哪个？

Flex 是一维的。这意味着使用 Flex 布局时，你可以同时拥有行和列，但不能同时拥有两者。CSS 网格布局非常强大，因为它拥有许多强大且实用的功能，有助于简化复杂布局的开发和控制。

可以通过使用 CSS 网格进行布局并使用 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的区别

答：当开发人员想要开发复杂的布局时，位置是一个非常有趣的领域。我们非常了解什么是固定位置，它会保持“固定”在我们声明的位置。sticky 的作用基本上类似于position:relative，直到元素滚动超过特定的偏移量，在这种情况下，它会变成position:fixed，导致元素“粘”在其位置，而不是滚动出视图。

面试官想了解你对位置的了解程度。位置是创建复杂布局最有趣的部分之一，并且在不同的分辨率下控制它们也是一门艺术。

5.什么是关键 CSS？

答：关键 CSS 是一种提取首屏内容 CSS 的技术，以便尽快将内容呈现给用户。这是一种使用基本内容快速加载网页的好策略。

这里面试官想看看你是否了解性能以及如何快速加载的新概念？

学习愉快！！