前端面试常见问题整理这份文档细致地汇编了前端开发面试中经常出现的问题,为应聘者提供了务实的复习材料,它涵盖了从布局技巧到CSS核心概念等多个方面,文档以实现水平垂直居中的多种方法开篇,让读者迅速把握Flex布局和绝对定位等技巧,并深入解析了伪元素的使用,为样式添加细节,移动端适配部分详细介绍了响应式设计的策略,包括CSS媒体查询和弹性布局的灵活运用,以及如何利用百分比和视口单位vw来实现自适应效果,文档中关于弹性布局两列设计的解答特别实用,指导如何结合flex属性进行布局优化,同时对包含在flex: 1内的属性做了清晰阐释,对BFC的探讨也为面试者提供了深层次理解这一复杂CSS概念的机会,整体而言,这份文档是前端求职者准备面试的宝贵资源,它以结构化的方式呈现信息,提供了针对性的学习路径,有助于应聘者在技术面试中展现出扎实的前端知识。
基础问题
1. 实现水平垂直 居中方式?
Flex 布局
绝对定位
margin 负值
2. 常用伪元素?
::before
::after
3. 移动端如何适配不同屏幕尺寸?
使用响应式设计。通过 CSS 媒体查询和弹性布局来根据屏幕尺寸调整页面布局和元素大小。
例如,可以使用百分比、em 或 rem 单位来实现元素的相对大小
使用弹性布局(Flexbox 或 Grid 布局)。这些布局技术可以帮助元素在不同屏幕尺寸下自动
调整位置和大小
使用流式布局。使用百分比单位和自适应容器来创建流式布局,使页面元素根据屏幕尺寸
自动调整大小
使用 vw 作为单位,根据设计稿宽度计算出 html 字体的大小,并以此作为布局的基础
4. 弹性布局一行两列,一列固定宽,如何实现?
给定宽的一列设置 flex: 0;给需要延展伸缩的一列设置 flex: 1
5. Flex: 1 包含了什么?
flex-grow:设置 flex 项主尺寸的增长系数
flex-shrink:指定了 flex 元素的收缩规则
flex-basis:指定了 flex 元素在主轴方向上的初始大小6. BFC(块级格式化上下文)