【译】你应该知道的5个CSS面试问题(上)

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



相关文章
|
15天前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
46 8
|
17天前
|
前端开发 容器
前端面试热门问题--浮动和清除浮动(CSS)
前端面试热门问题--浮动和清除浮动(CSS)
|
16天前
|
前端开发 容器
分享一些我在面试时所遇到的CSS问题 (五)
分享一些我在面试时所遇到的CSS问题 (五)
|
16天前
|
前端开发 容器
分享一些我在面试时所遇到的CSS问题 (四)
分享一些我在面试时所遇到的CSS问题 (四)
|
16天前
|
前端开发 JavaScript
分享一些我在面试时所遇到的CSS问题 (三)
分享一些我在面试时所遇到的CSS问题 (三)
|
16天前
|
前端开发 容器
分享一些我在面试时所遇到的CSS问题 (二)
分享一些我在面试时所遇到的CSS问题 (二)
|
16天前
|
前端开发 容器
分享一些我在面试时所遇到的CSS问题 (一)
分享一些我在面试时所遇到的CSS问题 (一)
|
27天前
|
存储 数据采集 移动开发
|
3月前
|
前端开发
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
一文搞懂css常用字体属性与背景属性(2),非科班面试之旅
|
3月前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
27 0