2026前端面试题及答案

2026前端面试题及答案

HTML/CSS 部分

1. 什么是盒模型？标准盒模型和IE盒模型的区别是什么？

答案：
盒模型是CSS中用于布局的基本概念，每个元素都被表示为一个矩形盒子，由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。

区别：

• 标准盒模型(W3C盒子模型)：width和height只包含内容(content)
• IE盒模型(怪异模式盒子模型)：width和height包含内容(content)、内边距(padding)和边框(border)

可以通过box-sizing属性切换：

/* 标准盒模型 */
box-sizing: content-box;

/* IE盒模型 */
box-sizing: border-box;

2. CSS选择器优先级如何计算？

答案：
CSS选择器优先级从高到低：

1. !important
2. 内联样式(style=“”)
3. ID选择器(#id)
4. 类选择器(.class)、属性选择器([type=“text”])、伪类(:hover)
5. 元素选择器(div)、伪元素(::before)
6. 通配符(*)、关系选择器(>, +, ~)

计算规则：

• ID选择器：100
• 类/属性/伪类：10
• 元素/伪元素：1
• 相加比较，值大的优先级高

3. BFC是什么？如何创建BFC？

答案：
BFC(Block Formatting Context)块级格式化上下文，是Web页面的可视化CSS渲染的一部分，是一个独立的渲染区域。

创建BFC的方法：

• float不为none
• position为absolute或fixed
• display为inline-block、table-cell、table-caption、flex、inline-flex
• overflow不为visible

BFC特性：

1. 内部盒子垂直排列
2. margin会重叠在同一个BFC中
3. BFC区域不会与float box重叠
4. BFC是独立容器，外部不影响内部

JavaScript部分

4. JavaScript中的事件循环机制是怎样的？

答案：
JavaScript是单线程语言，通过事件循环机制实现异步。事件循环由以下部分组成：

1. 调用栈(Call Stack)：执行同步代码的地方
2. 任务队列(Task Queue)：
   • 宏任务(macrotask)：script整体代码、setTimeout、setInterval、I/O、UI渲染等
   • 微任务(microtask)：Promise.then/catch/finally、MutationObserver等

执行顺序：

1. 执行同步代码（宏任务）
2. 执行过程中遇到异步任务：
   • 微任务放入微任务队列
   • 宏任务放入宏任务队列
3. 同步代码执行完毕，检查微任务队列并全部执行
4. UI渲染（如果需要）
5. 取出一个宏任务执行，重复上述过程

5. ES6中let/const与var的区别？

答案：

	var	let	const
作用域	函数作用域	块级作用域	块级作用域
变量提升	有	暂时性死区	暂时性死区
重复声明	允许	不允许	不允许
全局属性	会成为	不会成为	不会成为
初始值	可不设	可不设	必须设置
修改值	可以	可以	不可以

6. Promise的原理是什么？手写一个简单的Promise实现。

答案：
Promise是一种异步编程解决方案，主要解决回调地狱问题。它有三种状态：pending、fulfilled、rejected。

简单实现：

class MyPromise {
   
   
  constructor(executor) {
   
   
    this.state = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];
    
    const