没写完，睡醒补
CSS盒模型
//出现频率好高，感觉每次写面经都遇到
W3C标准盒模型(content-box)：盒子宽高=width/height+padding+border+margin
IE怪异盒模型(border-box)：盒子宽高=width/heigth(包括padding和border)+margin
默认标准切换怪异：box-sizing:border-box
对BFC有了解吗
BFC全称Block Formatting Context，块级格式化上下文，具有隔离性，BFC内部元素完全与外部隔离不会互相影响布局，内部默认垂直排布间距由margin决定，BFC会自动包裹浮动元素，不会造成高度塌陷问题，不同BFC间外边距不会合并
/* 常用触发方式 */ .element {display: flow-root; /* 最干净的BFC触发方式 */overflow: hidden/auto; /* 非visible值（慎用可能造成内容裁剪） */float: left/right; /* 非none值 */position: absolute/fixed; /* 绝对定位 */display: inline-block; /* 行内块元素 */contain: layout/content/paint; /* CSS Containment规范 */ }
CSS选择器，优先级
！important > 内联 > id > 类 = 伪类 = 属性 > 标签 = 伪元素 = 后代 > 子 = 相邻 > 通配
用到过哪些布局
1. 文档流布局（Normal Flow）
特点：元素按HTML顺序自然排列
痛点：难以实现复杂布局2. 浮动布局（Float）
应用场景：早期多栏布局
缺陷：需手动清除浮动（clearfix hack）3. 定位布局（Position）
典型应用：悬浮元素、模态框
1. Flexbox（弹性盒子）
核心优势：
一维布局（主轴方向控制）
动态分配剩余空间
完美垂直居中方案
2. Grid（网格布局）
核心优势：
二维布局（行列双向控制）
精准控制网格轨道尺寸
支持命名网格区域
3. 多列布局（Multi-column）
应用场景：报纸式文本排版
Flex布局有哪些属性
响应式怎么实现的
水平垂直居中的方法
//出现过好多次
//#1 绝对定位
.container{
position: absolute,
left: 50%,
top: 50%,
transform: translate(-50%,-50%),
}
//#2 flex
.container{
display: flex,
justify-content: center,
align-items: center,
}
//#3 grid
.container{
display: grid,
place-items: center,
}
//#4 行内块
.parent{
display: inline-block,
.child{
text-align: center,
vertical-align: center,
}
}
//#5 水平 margin
.container{
margin: 0 auto,
}闭包
函数嵌套，内层函数变量可访问外层函数变量，并于内层函数返回接口，导致外层函数变量一直存在，未被销毁，主要应用场景为防抖节流，滥用易造成内存泄漏
闭包使用场景
防抖节流
防抖和节流
防抖：触发事件回调，n秒后执行，若n秒内再次触发则重新计时
节流：频繁触发事件回调，单位时间内只执行一次，适用于滚动条
箭头函数和普通函数的区别
语法简洁，无构造函数，不能调用
箭头函数this指向
父级作用域，无父级指向Windows
无论普通函数还是箭头函数this指向机制
普通函数，构造即隐式绑定this指向自己
箭头函数，指向外层作用域
事件监听回调函数，即谁动指向谁
显示绑定： call apply bind
显示绑定指向箭头函数本身，无效
深拷贝和浅拷贝
一、核心概念对比
浅拷贝（Shallow Copy）
定义：仅复制对象的一层属性
引用处理：嵌套对象复制引用地址（新旧对象共享嵌套层）
内存占用：较少（仅复制第一层）
修改影响：修改嵌套对象会影响原对象
深拷贝（Deep Copy）
定义：递归复制对象的所有层级属性
引用处理：嵌套对象完全新建独立副本
内存占用：较多（全层级独立存储）
修改影响：新旧对象完全独立，互不影响
四、使用场景对比
简单对象且无嵌套引用
推荐方案：浅拷贝
原因：性能高效，实现简单
配置对象/状态管理
推荐方案：深拷贝
原因：避免意外修改原始数据
含函数/特殊类型（如Date、RegExp）的对象
推荐方案：Lodash.cloneDeep
原因：第三方库处理复杂类型更完善
需要极致性能的大数据操作
推荐方案：不可变数据结构（如Immutable.js）
原因：深拷贝成本过高时，通过结构共享优化性能
//浅拷贝 // 方法1：Object.assign const obj = { a: 1, b: { c: 2 } }; const shallowCopy1 = Object.assign({}, obj);// 方法2：展开运算符 const shallowCopy2 = { ...obj };// 方法3：数组浅拷贝 const arr = [1, { d: 3 }]; const shallowArr = arr.slice(); // 或 arr.concat()//深拷贝 // 方法1：JSON序列化（有局限性） const deepCopy1 = JSON.parse(JSON.stringify(obj));// 方法2：递归实现（基础版） function deepClone(source) {if (typeof source !== 'object' || source === null) return source;const target = Array.isArray(source) ? [] : {};for (const key in source) {if (source.hasOwnProperty(key)) {target[key] = deepClone(source[key]);}}return target; }// 方法3：使用第三方库 lodash import _ from 'lodash'; const deepCopy3 = _.cloneDeep(obj);
基本数据类型和引用数据类型指的哪些
基本：String Number Boolean Null Undefined Symbol BigInt
引用：Object
事件循环
宏任务和微任务
console.log('Script Start'); // 同步任务（宏任务）setTimeout(() => { console.log('setTimeout'); // 宏任务回调 }, 0);Promise.resolve().then(() => {console.log('Promise 1'); // 微任务1}).then(() => {console.log('Promise 2'); // 微任务2});console.log('Script End'); // 同步任务（宏任务）/* 输出顺序： Script Start Script End Promise 1 Promise 2 setTimeout */
