当前位置：首页 > news >正文

前端基础面试题及答案

news 2026/6/30 14:25:41

前端基础面试题及答案

一、HTML

1. HTML5 新增了哪些特性？

语义化标签：<header><footer><nav><section><article><aside>
新表单类型：emailnumberdaterangesearch等
多媒体标签：<audio><video>
Canvas / SVG 绘图
本地存储：localStoragesessionStorage
WebSocket、地理定位、拖拽 API

2.src和href的区别？

src：引入资源并替换当前元素（如<img><script>），会暂停页面解析
href：建立文档与资源的关联（如<a><link>），不会暂停解析

3. 行内元素和块级元素的区别？

块级元素	行内元素
是否独占一行	是	否
宽高设置	可以	不可以
常见标签	div、p、h1-h6	span、a、img

二、CSS

4. CSS 盒模型是什么？

标准盒模型（box-sizing: content-box）：width只包含内容区，实际宽度 = width + padding + border
怪异盒模型 / IE 盒模型（box-sizing: border-box）：width包含内容 + padding + border，实际宽度 = width

怪异盒模型因早期 IE 浏览器的非标准实现而得名，现在通过box-sizing: border-box主动使用，实际开发中反而更常用，因为更直观好控制尺寸。

5. BFC 是什么，如何触发？

BFC（块级格式化上下文）是一个独立的渲染区域，内部元素不影响外部。

触发条件：

overflow不为visible
display: flex / inline-block / table
position: absolute / fixed
float不为none

作用：清除浮动、防止 margin 重叠

6. 垂直居中的几种方式？

/* 方式一：flex */.parent{display:flex;align-items:center;justify-content:center;}/* 方式二：absolute + transform */.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}/* 方式三：absolute + margin auto */.child{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:100px;height:100px;}

7. CSS 选择器优先级？

从高到低：!important> 行内样式 > ID > 类/伪类/属性 > 标签 >*

用数字表示：0, 1, 0, 0(ID) >0, 0, 1, 0(class) >0, 0, 0, 1(tag)

8. flex 布局常用属性？

/* 容器属性 */display:flex;flex-direction:row | column;/* 主轴方向 */justify-content:center | space-between;/* 主轴对齐 */align-items:center | flex-start;/* 交叉轴对齐 */flex-wrap:wrap;/* 是否换行 *//* 子项属性 */flex:1;/* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */align-self:...;/* 单独设置交叉轴对齐 */order:1;/* 排列顺序 */

三、JavaScript

9.var/let/const的区别？

var	let	const
作用域	函数作用域	块级作用域	块级作用域
变量提升	有（值为 undefined）	有（暂时性死区）	有（暂时性死区）
重复声明	允许	不允许	不允许
可重新赋值	是	是	否

10. 什么是闭包？

函数内部可以访问外部函数变量，即使外部函数已执行完毕。

functioncounter(){letcount=0;returnfunction(){return++count;};}constadd=counter();add();// 1add();// 2

应用场景：防抖节流、模块化、数据私有化

11.==和===的区别？

===：严格相等，类型和值都要相同
==：宽松相等，会进行类型转换

常见陷阱：

0==false// true''==false// truenull==undefined// truenull===undefined// false

12. 事件循环（Event Loop）？

JavaScript 是单线程的，通过事件循环处理异步：

执行同步代码（调用栈）
执行所有微任务（Promise.then、MutationObserver）
执行一个宏任务（setTimeout、setInterval、I/O）
重复 2-3

console.log(1);setTimeout(()=>console.log(2),0);Promise.resolve().then(()=>console.log(3));console.log(4);// 输出：1 4 3 2

13. 深拷贝和浅拷贝？

浅拷贝：只拷贝第一层，引用类型仍共享内存（Object.assign、扩展运算符）
深拷贝：完整复制所有层级

// 简单深拷贝（不能处理函数、循环引用）constdeep=JSON.parse(JSON.stringify(obj));// 手写深拷贝functiondeepClone(obj){if(obj===null||typeofobj!=='object')returnobj;if(Array.isArray(obj))returnobj.map(deepClone);returnObject.fromEntries(Object.entries(obj).map(([k,v])=>[k,deepClone(v)]));}

14. 防抖和节流？

防抖（debounce）：一段时间内只执行最后一次（搜索框输入）

functiondebounce(fn,delay){lettimer=null;returnfunction(...args){clearTimeout(timer);timer=setTimeout(()=>fn.apply(this,args),delay);};}

节流（throttle）：一段时间内只执行第一次（滚动事件）

functionthrottle(fn,interval){letlast=0;returnfunction(...args){constnow=Date.now();if(now-last>=interval){last=now;fn.apply(this,args);}};}

15. Promise 的三种状态？

pending：初始状态
fulfilled：成功
rejected：失败

状态只能从 pending → fulfilled 或 pending → rejected，不可逆。

constp=newPromise((resolve,reject)=>{// 异步操作resolve('success');// 或 reject('error')});p.then(res=>console.log(res)).catch(err=>console.log(err)).finally(()=>console.log('done'));