CSS、JavaScript 高频面试题及详细答案（实战版）

CSS、JavaScript高频面试题及详细答案（实战版）一、CSS面试题（20道高频+易错）1.介绍CSS盒模型，标准盒模型和IE怪异盒模型的区别CSS盒模型是页面元素布局的核心，所有HTML元素都可以看作一个盒子，由内容区(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。两者核心区别在于元素整体宽度高度的计算方式：标准盒模型（W3C）：width/height仅指代内容区大小。

元素实际宽度=width+padding+border+margin怪异盒模型（IE）：width/height包含内容区、内边距、边框。

元素实际宽度=width+margin开发中可通过box-sizing切换：

box-sizing:content-box（默认，标准盒模型）

box-sizing:border-box（怪异盒模型，企业开发主流用法）2.CSS垂直水平居中的常用方式（至少4种）方式1：flex居中（最常用、兼容性好）父容器设置：display:flex;justify-content:center;align-items:center;方式2：绝对定位+transform（不定宽高元素通用）父：position:relative;

子：position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);方式3：绝对定位+margin自动（定宽高元素）父：position:relative;

子：position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;方式4：grid居中父容器设置：display:grid;place-items:center;3.讲讲BFC是什么，触发条件及应用场景BFC即块级格式化上下文，是浏览器的一块独立渲染区域，内部元素的布局不会影响外部元素，外部也不会影响内部。常见触发条件：根元素htmlfloat不为noneoverflow不为visible（hidden/auto/scroll）display为inline-block、flex、grid、table-cellposition为absolute、fixed应用场景：解决浮动元素父级高度塌陷问题解决相邻元素垂直外边距合并问题实现自适应两栏、三栏布局4.浮动的原理、问题及清除浮动的方法浮动原理：设置float的元素会脱离普通文档流，向左/向右漂浮，直到碰到父容器边界或其他浮动元素。浮动带来的问题：父容器高度塌陷（子元素浮动脱离文档流，父级无高度）后续普通流元素位置错乱、文字环绕异常清除浮动常用方法：父级设置overflow:hidden（简单常用，适合无溢出内容场景）伪元素清除浮动（企业通用，无副作用）：给父元素添加clearfix类新增空标签设置clear:both（冗余，不推荐）5.CSS优先级权重规则优先级从高到低，权重逐级递减，权重高的样式覆盖低权重：!important（最高，慎用）行内样式style=""（权重1000）ID选择器#id（权重100）类、伪类、属性选择器.class、:hover（权重10）标签选择器div、p（权重1）通配符*、继承样式（权重0）规则：权重数值可叠加，同级权重后写覆盖先写；!important不参与权重计算，直接最高优先级。6.行内元素、块级元素、行内块元素的区别块级元素（div/p/h1-ul）：独占一行，可设置宽高、内外边距，默认宽度100%父级宽度。行内元素（span/a/em）：同行显示，无法设置宽高、上下内外边距无效，仅自适应内容宽度。行内块元素（img/input，display:inline-block）：同行显示，同时支持设置宽高、内外边距，兼具两者优点。7.flex常用属性及布局原理Flex是弹性布局，分为容器属性和子项属性，默认一维布局，完美适配自适应场景。容器常用属性：flex-direction：主轴方向（row/column）justify-content：主轴对齐方式align-items：侧轴对齐方式flex-wrap：是否自动换行子项常用属性：flex-grow：放大比例（默认0，不放大）flex-shrink：缩小比例（默认1，自动缩小）flex-basis：元素基础尺寸flex：1简写（均分剩余空间）8.移动端适配方案有哪些？viewport适配：设置metaviewport视口标签，适配手机屏幕rem适配：根据屏幕宽度动态设置html字体大小，所有尺寸用rem单位vw/vh适配：视口单位，1vw等于屏幕宽度1%，无需JS计算，主流新项目首选flex弹性布局：实现自适应排版媒体查询media：针对不同屏幕尺寸定制样式9.CSS3新特性有哪些？常用核心特性：圆角border-radius、阴影box-shadow/text-shadow、过渡transition、动画animation、变换transform、flex/grid布局、vw/vh单位、透明度opacity、伪元素::before/::after。10.重排和重绘的区别，如何优化？重绘：元素样式改变但布局不变（如颜色、透明度），浏览器重新绘制元素，开销较小。重排（回流）：元素布局、尺寸、位置改变，浏览器重新计算整个页面布局，开销极大。优化方案：集中修改样式，避免频繁操作DOM样式使用transform、opacity实现动画（仅触发重绘，不触发重排）脱离文档流的元素修改样式，不影响整体布局二、JavaScript面试题（30道基础+原理+实操）1.JS的数据类型有哪些？如何判断数据类型？基本数据类型（7种）：String、Number、Boolean、Null、Undefined、Symbol、BigInt引用数据类型（1种）：Object（包含对象、数组、函数、正则等）类型判断方式：typeof：判断基本类型（null返回object，数组返回object，有缺陷）instanceof：判断引用类型，检测构造函数原型Ototype.toString.call()：精准判断所有数据类型（面试首选）2.null和undefined的区别undefined：声明变量未赋值、函数无返回值、对象不存在的属性，代表未定义、无值。null：主动手动赋值的空值，代表空对象占位。区别：typeofundefined→undefined；typeofnull→object；

null==undefined为true，null===undefined为false。3.讲讲JS变量提升、函数提升JS代码执行前会进行预解析，将变量、函数声明提升到当前作用域顶部。变量提升：var声明的变量提升，初始值为undefined；let/const存在暂时性死区，不提升。函数提升：完整函数声明整体提升，优先级高于变量提升；函数表达式不会提升。核心规则：先提升函数，再提升变量，同名变量和函数，函数优先级更高。4.var、let、const的区别var：函数级作用域，存在变量提升，可重复声明、可修改，无暂时性死区let：块级作用域，无变量提升，不可重复声明，可修改值，存在暂时性死区const：块级作用域，无变量提升，不可重复声明，常量不可修改地址（对象、数组可改内部属性）开发规范：优先使用const，可变变量使用let，禁用var。5.什么是暂时性死区？在块级作用域中，使用let/const声明的变量，在声明之前无法访问，这段区域就是暂时性死区。目的：避免变量提升带来的先使用后声明的不规范写法，让代码更严谨。6.作用域、作用域链、闭包的理解作用域：变量的可访问范围，分为全局作用域、函数作用域、块级作用域。作用域链：当访问一个变量时，会先在当前作用域查找，找不到就向上级作用域查找，直到全局作用域，这条查找链路就是作用域链。闭包：内层函数访问外层函数的变量，且内层函数被外部调用，就会形成闭包。闭包作用：保存私有变量、延长变量生命周期、实现模块化、防抖节流核心原理。闭包缺点：变量常驻内存，容易造成内存泄漏，需手动释放。7.原型和原型链的理解JS中所有函数都有prototype（显式原型），所有对象都有__proto__（隐式原型），对象的隐式原型指向构造函数的显式原型。原型链：对象通过__proto__层层向上查找原型，最终指向Ototype，末端为null，这条链路就是原型链。作用：实现属性和方法的继承，节省内存，所有实例可共享原型上的方法。8.this指向问题（高频）this的指向在调用时确定，和定义位置无关：普通函数调用：this指向window（浏览器）/global（node）对象方法调用：this指向调用方法的对象构造函数调用：this指向new创建的实例对象箭头函数：无自身this，继承外层作用域的this，无法绑定、无法作为构造函数call/apply/bind：强制修改this指向9.call、apply、bind的区别三者都是修改函数this指向的方法：call：立即执行函数，参数逐个传递（fn.call(this,1,2)）apply：立即执行函数，参数以数组形式传递（fn.apply(this,[1,2])）bind：不立即执行，返回修改this后的新函数，可延迟调用、固化参数10.new关键字的执行过程创建一个空的新对象将新对象的__proto__指向构造函数的prototype修改构造函数内部this，指向新对象执行构造函数代码，给新对象添加属性和方法如果构造函数无返回值/返回基本类型，返回新对象；返回引用类型则返回该引用值11.深拷贝和浅拷贝的区别及实现方式浅拷贝：只拷贝对象第一层属性，引用类型属性只拷贝地址，新旧对象共享同一引用，修改互相影响。深拷贝：递归拷贝所有层级属性，新旧对象完全独立，修改互不影响。实现方式：浅拷贝：Object.assign()、扩展运算符...、数组slice()深拷贝：JSON.parse(JSON.stringify())（简单数据，无法拷贝函数/undefined/Symbol）、递归手写深拷贝、lodash.cloneDeep12.数组常用方法及是否改变原数组改变原数组：push、pop、unshift、shift、splice、sort、reverse不改变原数组：map、filter、reduce、forEach、slice、concat、join、find、every、some高频重点：map返回新数组（映射）、filter过滤数组、reduce累计计算、find查找第一个匹配项。13.异步JS发展史及宏任务、微任务异步演进：回调函数→Promise→async/await（目前主流）宏任务：script整体代码、setTimeout、setInterval、AJAX、DOM事件微任务：Promise.then/catch/finally、async/await、queueMicrotask事件循环执行顺序：执行同步代码清空所有微任务队列执行一个宏任务重复循环（微任务优先于宏任务）14.Promise的理解及三种状态Promise是解决异步回调地狱的方案，用于处理异步操作，状态一旦改变不可逆。三种状态：pending（等待中）：初始状态fulfilled（成功）：执行resolve()rejected（失败）：执行reject()常用方法：then（成功回调）、catch（失败捕获）、finally（无论成败都会执行）、all、race、allSettled。15.async/await的作用和原理async/await是Promise的语法糖，让异步代码可以像同步代码一样书写，极大提升可读性。async修饰函数，返回值为Promise对象await只能在async函数内使用，阻塞代码，等待Promise执行完成异常处理：通过try/catch捕获异步错误。16.回调地狱是什么，如何解决？多层异步回调嵌套，代码层层缩进、可读性极差、难以维护，就是回调地狱。解决方案：Promise链式调用→async/await同步化写法（最优解）。17.防抖和节流的区别及应用场景两者都是高频事件优化方案（resize、scroll、输入框input、按钮点击）：防抖：触发事件后，延迟n秒执行，期间再次触发会重置计时，只执行最后一次。

场景：搜索框输入联想、窗口大小调整。节流：固定时间内只执行一次，匀速执行、限制频率。

场景：页面滚动、鼠标移动、高频点击。18.内存泄漏的常见原因及解决常见原因：全局变量过多、未手动清空闭包滥用，变量常驻内存定时器、事件监听未销毁