Vue前端面试题总结
css水平、垂直居中的写法
方法一：flex布局实现
display:flex;
justify-content:center;//水平方向居中
align-items:center;//垂直方向居中
方法二：绝对定位水平垂直居中 +【Transforms 变形】
子绝父相
方法三：绝对定位水平垂直居中 + 【margin:auto实现绝对定位元素的居中】(需要有width和height)
CSS的几种定位方式
1、static（静态定位）：
默认值。没有定位
2、relative（相对定位）：
相对定位是指元素相对于标准文档流中其的默认位置，来进行定位的
**相对定位并不会让元素脱离标准流 **
相对定位也不会影响到周围其它元素的排布
实际使用时，相对定位一般都是和位置属性一起使用。因为单独使用，你也看不到啥效果啊【如果不和位置属性top、left、bottom、right一起使用，只是单纯设置position: relative; 而已，那它还是会在原来的那个坑里，不会有什么变化】
1rem、1em、1vh、1px各自代表的含义？
rem是全部的长度都相对于根元素<html>元素。通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
子元素字体大小的em是相对于父元素字体大小
vw/vh 全称是 Viewport Width 和 Viewport Height，视窗的宽度和高度，相当于 屏幕宽度和高度的 1%，不过，处理宽度的时候%单位更合适，处理高度的 话 vh 单位更好。
px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的
rpx （ responsive pixel）响应单位
- rpx是微信小程序独有的、解决屏幕自适应的尺寸单位
- 可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx
- 通过 rpx 设置元素和字体的大小，小程序在不同尺寸的屏幕下，可以实现自动适配
关于移动端适配，你必须要知道的
https://juejin.cn/post/6844903845617729549
画一条0.5px的直线？
解决方法
通过伪类元素:after为其添加样式，用transform：scaleY令其在垂直方向缩小0.5倍
.div:after{
height: 1px;
transform: scaleY(0.5);
transform-origin: 50% 100%; // 要指定origin值, 要不然会模糊
content: "";
position: absolute;
width: 100%;
left: 0;
bottom: 0;
background: red;
}
说一下盒模型？
盒模型的组成，由里向外content,padding,border,margin.
在IE盒子模型中，width表示content+padding+border这三个部分的宽度
在标准的盒子模型中，width指content部分的宽度
box-sizing的使用
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型box-sizing的默认属性是content-box
前端怎么画三角形_用CSS画一个三角形
https://blog.csdn.net/weixin_26851157/article/details/112993478
清除浮动的几种方式，及原理？
首先：为什么要清除浮动？
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0造成塌陷的问题。
（1）父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
（2）父级div定义 overflow:hidden/auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden/auto时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好；
缺点：overflow:hidde内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素；overflow:auto内容增多可能出现滚动条（不推荐使用）；
（3）结尾处加空div标签 clear:both
原理：添加一个空div，利用css提供的clear:both清除浮动，让父级div自动检测子盒子最高的高度，然后与其同高（本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来）。
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好（添加无意义标签，语义化差，所以不建议使用。）。
（4）伪类元素:after清除浮动（推荐使用）
原理：其本质与添加空div标签是一样的，都是添加一个不可见但占位置的块级元素，然后清除掉所有的浮动；
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。
（5）双伪类元素:after和:before清除浮动（推荐使用）
原理与单伪元素清除浮动一样；
什么是BFC？
说一下<label>标签的用法
label标签主要是方便鼠标点击使用，扩大可点击的范围，增强用户操作体验
数组去重？
var arr=['12','32','89','12','12','78','12','32'];
方法一：用数组的indexOf方法去重（利用数组的includes去重） 定义一个方法，在方法中定义一个新的临时数组,然后遍历当前数组，把原数组中不重复的值依次追加到新数组中，然后再返回这个新的数组。
// 最简单数组去重法
function unique1(array){
var n = []; //一个新的临时数组
for(var i = 0; i < array.length; i++){ //遍历当前数组
if (n.indexOf(array[i]) == -1)
n.push(array[i]);
}
return n;
}
arr=unique1(arr);
方法二：利用ES6中的 Set 方法去重（set数据解构）+ 扩展运算符 或者 （set）+ Array.from()实现
arr=[...new Set(arr)];
es6方法数组去重，第二种方法
function dedupe(array) {
return Array.from(new Set(array)); //Array.from()能把set结构转换为数组
}
方法三、使用双重for循环，再利用数组的splice方法去重（ES5常用）,每一次循环将该项和数组后面的项进行比较，相等的话就删掉
function unique(arr) {
for (var i = 0, len = arr.length; i < len; i++) {
for (var j = i + 1, len = arr.length; j < len; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1);
j--; // 每删除一个数j的值就减1
len--; // j值减小时len也要相应减1（减少循环次数，节省性能）
// console.log(j,len)
}
}
}
return arr;
}
console.log(unique(arr));
get、post的区别
1.传参方式：get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进行参数分割。post将参数存放在HTTP的包体内
2.传递的数据长度:get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制
3.get后退不会有影响，post后退会重新进行提交
4.get请求可以被缓存，post不可以被缓存
5.get请求只URL编码，post支持多种编码方式
6.get请求的记录会留在历史记录中，post请求不会留在历史记录
7.get只支持ASCII字符，post没有字符类型限制
ES6
1、块级作用域 let const
2、解构赋值
3、模板字符串
4、set 和 map 数据解构
5、promise
6、async await
浙公网安备 33010602011771号