前端经典面试题
前端经典面试题涵盖了多个方面，包括CSS、JavaScript、HTML、Vue等。以下是一些常见的前端面试题及其答案：
CSS
- CSS选择器样式优先级：选择器的优先级按照重要性排序为：!important > 内联样式 > ID选择器 > 类选择器 > 标签选择器 > 伪类选择器 > 属性选择器 > 伪元素选择器 > 通配符选择器1。
- 实现三列布局：可以使用Flexbox或Grid布局来实现左右固定宽度、中间自适应的三列布局。
- Flexbox布局：
.container {display: flex; } .column-left {width: 200px;background: #f1f1f1; } .column-right {width: 200px;background: #f1f1f1; } .column-middle {flex: 1;background: #ffffff; } - Grid布局：
.container {display: grid;grid-template-columns: 200px auto 200px; } .column-left, .column-right {background: #f1f1f1; } .column-middle {background: #ffffff; }
- Flexbox布局：
- CSS盒模型：CSS盒模型分为IE盒模型和标准盒模型。IE盒模型（box-sizing: border-box）中，宽度（设置的width）包括内容宽、左右内边距和内外边距；标准盒模型（box-sizing: content-box）中，宽度仅包括内容宽2。
- 实现圣杯布局和双飞翼布局：这些布局通常用于PC端，通过使用浮动和定位来实现三栏布局2。
- 实现水平垂直居中：可以使用Flexbox、Grid布局或使用margin和transform属性来实现2。
- 清除浮动的方法：可以使用overflow: hidden、使用伪元素清除浮动或使用Flexbox布局来避免浮动问题2。
- CSS3属性：包括RGBA、透明度、background属性、word-wrap属性、text-shadow属性、font-face属性、border-radius属性、border-image属性、box-shadow属性、媒体查询等1。
- 图片懒加载：通过设置图片的
loading="lazy"属性来实现图片的懒加载3。 - 媒体查询：用于响应式设计，根据不同屏幕尺寸应用不同的样式1。
- 父容器高度塌陷的解决方案：可以通过在父容器中添加
overflow: hidden或使用伪元素清除浮动来解决2。 - CSS选择符：包括ID选择符、类选择符、标签选择符、伪类选择符、属性选择符等，它们的优先级不同1。
- 隐藏元素的方式：包括
display: none、visibility: hidden、opacity: 0、position: absolute等1。 - link和@import的区别：link可以加载CSS和RSS，@import只能加载CSS；link在页面载入时同时加载，@import在页面载入后再加载；link无兼容问题，@import有兼容性问题1。
- transition和animation的区别：transition是过渡效果，需要触发事件才生效；animation是动画效果，可以自动触发，可以结合@keyframes进行多个关键帧的动画1。
- 伪元素和伪类：伪元素用于添加一些不在文档树中的元素，如
::before和::after；伪类用于定义元素的特殊状态，如:hover和:active1。
JavaScript和ES6
- ES6与ES5的区别：ES6引入了新的语法和特性，如箭头函数、模板字符串、解构赋值、Promise等4。
- var、let、const的区别：var有函数提升，let和const没有；var没有块级作用域，let和const有；let和const声明后不可重新赋值5。
- 继承的方式：包括原型链继承、构造函数继承、实例继承和ES6的Class继承5。
- 原型链的理解：原型链是JavaScript中对象之间的继承关系，每个对象都有一个原型对象，原型对象也有自己的原型，直到达到一个终点Object.prototype5。
- 数据类型：JavaScript中有原始数据类型（Number、String、Boolean、Undefined、Null、Symbol）和引用数据类型（Object）5。
- 判断数据类型的方式：可以使用
typeof操作符、instanceof操作符、Object.prototype.toString.call()等方法5。 - 数组去重的方式：可以使用Set对象、filter方法等5。
- 深拷贝和浅拷贝的区别：深拷贝会复制对象及其内部的所有对象，浅拷贝只会复制第一层对象5。
- 防抖和节流的区别：防抖是在事件触发一段时间后再执行函数，节流是在固定时间间隔内只执行一次函数5。
- 二叉树的遍历方式：包括前序遍历、中序遍历和后序遍历5。
- 数组扁平化的方法：可以使用递归、reduce方法等实现5。
- 同时发起多个请求：可以使用Promise.all方法同时发起多个请求5。
- Webpack插件的使用：Webpack提供了许多插件，如HtmlWebpackPlugin用于生成HTML文件等3。
- jQuery的扩展方式：可以通过$.fn.extend()方法扩展jQuery的功能3。
- 盒模型的差异：包括IE盒模型和标准盒模型的差异2。
- 跨域问题处理：可以通过JSONP、CORS等方式解决跨域问题3。
- 登录鉴权处理：可以通过Session存储用户状态，使用JWT进行无状态鉴权等3。
- 前端性能优化方案：包括图片懒加载、代码分割、缓存利用等3。
- cookie和session的区别：cookie存储在客户端，session存储在服务器端；cookie有大小限制且不安全，session无大小限制且相对安全3。
- 移动端适配问题：包括2X图3X图适配、点击穿透问题等