2025前端面试题（被提问过得题目）

前言

这两天骑驴找马，忙着投简历面试，把这两天面试遇到的问题记录一下，自己做个汇总，路过的小伙伴可以看看2025年面试问那些问题

---

提示：回答问题的时候一定要有气势，遇到不会的就说用过，记不清了

---

一、CSS篇

1.左边固定，右边自适应

<style type="text/css">
    .box{
   
        height: 100px;
        display: flex;
    }
    .left{
   
        flex-basis: 100px;
        background-color: silver;
    }
    .right{
   
        flex-grow: 1;
        background-color: pink;
       
    }
</style>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

2.左右固定，中间自适应

<style type="text/css">
    .box{
   
        height: 100px;
        display: flex;
    }
    .left{
   
        flex-basis: 100px;
        background-color: silver;
    }
    .right{
   
        flex-grow: 1;
        background-color: pink;
       
    }
</style>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="left"></div>
</div>

3.一个盒子靠左，一个盒子居中

4.position绝对定位的几个属性

absolute 生成绝对定位的元素,相对于static定位以外的一个父元素进行定位。
relative 生成相对定位的元素,相对于其原来的位置进行定位。
fixed 生成绝对定位的元素,指定元素相对于屏幕视⼝(viewport)的位置来指定元素位置。
static 默认值,没有定位,元素出现在正常的文档流中
inherit 规定从父元素继承position属性的值

5.几种方法把盒子水平垂直居中

//利用绝对定位
方法1：
    .parent {
   
        position: relative;
    }

    .child {
   
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
    方法2：
        .parent {
   
        position: relative;
    }

    .child {
   
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    方法3：
        .parent {
   
        position: relative;
    }

    .child {
   
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
    //使用flex布局
        .parent {
   
        display: flex;
        justify-content: center;
        align-items: center;
    }

6.Flex包含哪三种属性

Flex：1包含flex-grow、flex-shrink和flex-basis三个属性，分别表示元素在剩余空间中的占比、元素在空间不足时的缩放比例和元素的基准大小。

7.常用伪元素有哪一些？

::before
用途：在元素内容之前插入内容。

.element::before {
   
  content: "→ ";
  color: red;
}
2. ::after
用途：在元素内容之后插入内容。

.element::after {
   
  content: " ←";
  color: blue;
}
3. ::first-letter
用途：对元素的第一个字母应用样式。

p::first-letter {
   
  font-size: 2em;
  color: green;
}
4. ::first-line
用途：对元素的第一行应用样式。

p::first-line {
   
  font-weight: bold;
  color: purple;
}
5. ::selection
用途：对用户选择的文本应用样式。

::selection {
   
  background-color: yellow;
  color: black;
}
6. ::placeholder
用途：对输入框的占位符文本应用样式。

input::placeholder {
   
  color: gray;
  font-style: italic;
}
7. ::backdrop
用途：对全屏元素的背景应用样式（仅在全屏模式下有效）。

.fullscreen-element::backdrop {
   
  background-color: rgba(0, 0, 0, 0.5);
}
8. ::cue
用途：对视频或音频的字幕（WebVTT）应用样式。

video::cue {
   
  color: white;
  background-color: black;
}
9. ::marker
用途：对列表项标记（如<li>的项目符号）应用样式。

li::marker {
   
  color: red;
  font-size: 20px;
}
10. ::spelling-error 和 ::grammar-error
用途：对文本中的拼写错误和语法错误应用样式（仅在支持的浏览器中有效）。

p::spelling-error {
   
  background-color: yellow;
}

p::grammar-error {
   
  background-color: orange;
}

二、js篇

1.数组a=[a,b,c],数组b=[c,d,e],两数组合并

代码如下（示例）：

  var A = [1, 2, 3];
        var B = [2, 3, 4];

        var combinedArray = Array.from(new Set([...A, ...B]));
        console.log(combinedArray)//[1,2,3,4]

2.数组头部新增数据，尾部新增一个数据，删除中间数据方法

代码如下（示例）：

  var A = [1, 2, 3, 4, 5]; // 原始数组 A   
        A.unshift(0); // 在头部添加元素 0
        A.push(6); // 在尾部添加元素 6
        A.splice(3, 1); // 删除索引为 3 的元素
        console.log(A); // [0, 1, 2, 4, 5, 6]

---

3.都有那些循环

1、for循环
2、for in循环
3、while循环
4、do while循环
5、Array forEach()循环
6、Array map()循环
7、Array filter()方法
8、Array some()方法
9、Array every()方法
10、Array reduce()方法
11、Array reduceRight()方法

4.怎么把异步改为同步

//循环等待实现异步转同步
// 创建一个标志变量，表示异步操作是否已完成
var isDone = false;

// 开始执行异步操作
doAsyncOperation(() -> {
   
  // 当异步操作完成时，将标志变量设为 true
  isDone = true;
});