前端面试问题汇总 - 基础篇

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(块级格式化上下文)

块级格式化上下文(Block Formatting Context,BFC)是 HTML 文档中的一种布局机制,用于决定块级盒子如何放置并与其他元素相互交互。在一个 BFC 中,内部的块级盒子会按照一定规则进行排列,不会影响到外部的布局。

特性:

  • 盒子排列: BFC 中的块级盒子垂直排列,即一个盒子紧跟在另一个盒子的下方。
  • 边距折叠: 在 BFC 中,相邻块级盒子的垂直外边距会发生折叠,但是和外部的盒子不会发生折叠。
  • 不与浮动元素重叠: 在 BFC 中,浮动元素不会覆盖 BFC 内部的块级盒子,块级盒子会根据浮动元素的位置重新排列。
  • 包含浮动元素: BFC 会包含其内部所有浮动元素,不会发生高度塌陷问题。
  • 阻止文本环绕: BFC 会阻止文本环绕浮动元素,使得文本不会被浮动元素覆盖。

触发条件:

  • 根元素或包含根元素的元素。
  • 浮动元素(float 不为 none)。
  • 绝对定位元素(position 为 absolute 或 fixed)。
  • 行内块(inline-block)元素。
  • overflow 属性不为 visible 的块级元素。

BFC 的概念对于控制布局和解决布局问题非常重要,特别是在处理浮动、清除浮动、防止 margin 折叠、处理文本环绕问题等方面具有很好的效果。

相关推荐
测试老哥几秒前
外包干了两年,技术退步明显。。。。
自动化测试·软件测试·python·功能测试·测试工具·面试·职场和发展
如若12331 分钟前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~1 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语1 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport1 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg1 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww1 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254882 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
ThisIsClark2 小时前
【后端面试总结】深入解析进程和线程的区别
java·jvm·面试
星就前端叭2 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc