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

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 折叠、处理文本环绕问题等方面具有很好的效果。