沒寫完，睡醒補
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 */
