前端面试常见问题整理 PDF 下载

java1234 2024年04月19日 11:18

      前端面试常见问题整理


      失效链接处理

      前端面试常见问题整理 PDF 下载

      转载自:http://java.python222.com/article/1362

      相关截图:

      主要内容:

      基础问题

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