前端面试题整理

1.css的居中方式

1、文本类元素（行内元素）水平居中：
text-align: center;文本类元素垂直居中：line=height:容器高度

2、块级标签（display:block）水平居中：
margin-left: auto;margin-right: auto;

3、定位的标签居中：
水平居中left:50%;transform:translateX(-50%);垂直居中top:50%;transform:translateY(-50%);

4、flex布局：
父级display:flex。子级：justify-content: center;实现水平居中。子级align-items: center;实现垂直居中

5、背景图片居中,调整背景图片位置：
background-position:center center

2.css常用单位px,em,rem,%,vw,vh

1.px:绝对单位
实际测量设计图的尺寸即为px，一般相当于屏幕上的1像素

2.em:相对单位
em如果设置文字大小，参照物是父级文字大小。如果设置不是文字大小（eg设置的是标签的宽度或者高度…），参照物是当前标签文字大小

3.rem:相对单位
参照物是html文字大小,文字最小是12px 。

4.vw:相对单位
100vw相当于当前窗口的宽度的100%

5.vh:相对单位
100vh相当于当前窗口高度的100%

6.%:相对单位
宽度设置%，参照物是父级的宽度
高度设置%，参照物是父级的高度
padding-bottom和padding-top设置%，参照物是父级的宽度
文字设置%：参照物是父级文字大小。

3.display的值和作用

常用的属性值有display：none； display：block； display：inline；display：inline-block ；

display:none 隐藏该元素

display:block 显示为块级元素

display:inline 显示为行内元素

display:inline-block 显示为行内块级元素

通过以上属性值 我们便可以做到元素之间的转化
顾名思义 行类块级元素display:inline-block 这个属性简单的来说就是使得元素既有block的属性又有inline的属性 可以设置宽高以及上下边距(行类元素只能设置左右边距不能设置上下边距)

4.数组去重

1.双重for循环来去重

循环遍历数组中的每一个单元,跟其之后的单元进行比较,如果相同,就删除之后的单元
var arr=[1,1,1,2,3,3,4,2,5,5,7,8];
for(let i=0;i<arr.length;i++){
   
	for(let j=i+1;j<arr.length-1;j++){
   
		if(arr.[i]===arr.[j]){
   
		arr.splice(j,1);
			j--;
		}
	}
}
console.log(arr)//[1, 2, 3, 4, 5, 7, 8]

2.利用数组的排序方法再进行循环删除

var arr=[1,1,1,2,3,3,4,2,5,5,7,8];
arr.sort((a,b)=>{
   return a-b});
console.log(arr);//[1, 1, 1, 2, 2, 3, 3, 4, 5, 5, 7, 8]
for (let i = 0; i <= arr.length - 1 - 1; i++) {
   
            if (arr[i] === arr[i + 1]) {
   
                arr.splice(i + 1, 1);
                i--;
            }
        }
console.log(arr);//[1, 2, 3, 4, 5, 7, 8]

3.利用对象中不能储存相同的键名这一特点来去重

var arr=[1,1,1,2,3,3,4,2,5,5,7,8];
const obj = {
   };

arr.forEach(function (val, key) {
   
    obj[val] = 'haha'