2022最新前端开发常见基础面试题（篇一）

2022最新前端开发常见基础面试题(篇一)

1.CSS盒模型

1.1 盒子模型概念
网页中，每一个元素都占有一定的空间，无论是div、h1~h6、还是p，都可以看成是盒子。
1.2 盒子的组成
元素的内容（content），元素的内边距（padding），内容与边框之间的距离，元素的边框（border）元素的外边距（margin）这四个部分一起构成了盒子模型
1.3 盒子模型的分类
W3C标准盒子（content-box）：又称内容盒子。子元素可以撑开父元素.在这种盒模型下，我们所说的元素的 width ，实际上只包含 content：
盒子总宽度 = margin + border + padding + width
IE盒子（border-box）：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型。怪异盒模型中，父元素的盒模型确定，子元素无法撑开父元素的盒模型。在这种盒模型下，我们所说的元素的 width ，实际上包含了 content + padding + border：
盒子总宽 = margin + width

2.CSS选择器及其优先级

css优先级规则：
1、css选择规则的权重值不同时，权重值高的优先；
2、css选择规则的权重值相同时，后定义的规则优先；
3、css属性后面加 !important 时，无条件绝对优先；

3.CSS3新特性

1.过渡属性
transition： 要改变的属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)
2.动画属性
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）
3.圆角属性：
CSS border-radius - 指定每个角
border-radius 属性可以接受一到四个值。规则如下：
四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角）：
三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角）：
两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）：
一个值 - border-radius: 15px;（该值用于所有四个角，圆角都是一样的）：
4.引入了rgba
5.背景色渐变

#grad {
  background-image: linear-gradient(red, yellow);
}

这是从上到下从红色渐变为黄色

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

这是从左到右由红色渐变成黄色
6.盒子阴影

div
{
box-shadow: 10px 10px 5px #888888;
}

7.盒子新特性

box-sizing:border-box;

8.justify-content
在容器中央对齐弹性项目

div {
  display: flex;
  justify-content: center;
}

9.overflow：scroll
让溢出的文字具有滚动条

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

10.transform（旋转）

div
{
transform:rotate(7deg);
}

11.准许文字换行

p.test {word-wrap:break-word;}

4.弹性盒子

（1）弹性盒子是 CSS3 的一种新的布局模式。
（2）引入弹性盒布局模型的目的：是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间
（3）兼容性： IE11+及标准浏览器最新版是支持的
（4）任何容器都可以指定为一个弹性盒子

display: flex;
display: inline-flex;

以上两条属性需要加给容器
注意：弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效 ，行级元素也可以设为弹性盒子
(5)基本概念
容器：设置flex布局的盒子，叫做容器（flex container）
项目：容器中的直接子元素就是项目（flex item）
主轴：默认是水平方向的，从左到右的
交叉轴(侧轴)：默认是垂直方向的，从上到下的
(6)flex属性:
1.flex-direction属性，决定主轴的方向

row（默认值）：主轴为水平方向，起点在左端
row-reverse：主轴为水平方向，起点在右端
column：主轴为垂直方向，起点在上沿
column-reverse：主轴为垂直方向，起点在下沿

2.justify-content 属性，定义了项目在主轴上的对齐方式

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等

3.flex-wrap属性，如果一条轴线排不下，如何换行

nowrap（默认）：不换行
wrap：换行，第一行在上方
wrap-reverse：换行，第一行在下方

4.align-items属性,控制元素在侧轴上的排列方式。 多行单行都适用的属性。

flex-start 从侧轴开始的地方对齐
flex-end 从侧轴结束的地方对齐
center 中间对齐
stretch 拉伸，没有设置侧轴方向上的宽/高时，等于父盒子的宽或高。

5.align-content控制元素在侧轴上的排列方式。只适用于多行显示的弹性容器。

stretch 拉伸
flex-start 元素紧靠行的起点
flex-end 元素紧靠行的终点 center 元素在行中居中
space-between 第一个元素紧靠行的起点，最后一个元素紧靠行的终点，余下元素平均分配剩余空间
space-around 元素在侧轴方向上的间隔相等。元素之间的间隔比元素与容器边框的间隔要大一倍。
space-evenly 元素间距离平均分配 。

6.flex-flow ：复合属性，相当于同时设置了flex-direction和flex-wrap

5.发生高度坍塌，外边距重叠原因及解决方法

一．高度塌陷：
文档流中父元素高度默认被子元素撑开，但子元素设置浮动以后，就会脱离文档流，导致子元素无法撑起父元素高度，父元素则会高度塌陷，父元素下的所有元素都会向上移动，导致页面布局混乱
二.垂直外边距的重叠问题
(1)产生的条件：1.网页中垂直方向的相邻的外边距会产生外边距的重叠
(2)产生的问题：
1.兄弟元素之间相邻的外边距会取最大值（而不是求和）
2.父子元素之间的垂直外边距相邻了，子元素的外边距设置值会传给父元素。
三.解决办法：
1.开启元素的BFC
BFC的使用范围：

1.当将子元素浮动导致父元素高度塌陷时
2.当子元素与父元素边距重叠时
3.当一个元素浮动后，下一个元素会自动往上排，导致浮动的元素覆盖了下面的元素时

开启元素的BFC方式：

1)float 的值不是 none
2)position 的值不是static或者relative。
3)display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4)overflow 的值不是 visible

2.使用伪元素和clear：both
可以同时解决高度塌陷和外边距重叠的问题
因为大部分开启BFC的属性都会有副作用，和不足的地方，使用以下方式可以完美解决

.clearfix::before,
.clearfix::after{
            content: '';
            display: table;
            clear: both;
        }

6.定位的理解

1.absolute（绝对定位）

相对于离它最近的有定位的元素，如果没有离它最近的有定位的元素， 那么最后相对于的就是浏览器窗口

2.relative （相对定位）

我们写出一个元素，显示在浏览器窗口中，这个时候再加相对定位，就是相对于原先默认的位置

3.fixed ( 固定定位 )

一般都是相对于浏览器窗口，可以看做是相对于浏览器窗口的绝对定位

4.static ( 无定位 )

不设置定位，就是没有定位，按默认的布局显示

5.inherit ( 继承 )

继承父元素的定位属性，其父元素是相对定位，那么子元素也是相对定位

6.sticky （粘性定位）

简单来说就是 相对定位+固定定位，可以实现导航栏固定定位效果

7.设置元素水平垂直居中

一、利用margin:auto
元素有宽度和高度时，利用margin:auto设置元素水平垂直居中

position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
margin:auto;

二、利用position: absolute
1.当已知元素宽度和高度时，可以设置position: absolute和margin为负的宽高的一半

position: absolute; 
left: 50%; 
top: 50%;
margin-left: -25px;
margin-top: -25px;

2.当已知元素宽度和高度时，也可以利用calc计算属性设置top和left：

position: absolute; 
left: calc(50% - 25px); 
top: calc(50% - 25px);

3.当元素宽度和高度未知时，可以设置position: absolute和transform: translate(-50%, -50%)

 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);

三、弹性盒子
通过为其父元素设置display: flex来实现居中。

display: flex; 
justify-content: center; 
align-items: center;

四、利用水平对齐和行高
设置text-align 和 line-height 实现单行文本水平垂直居中

text-align: center; 
line-height: 200px;

8.常见数据类型及区别

常见数据类型分为：基本数据类型和引用数据类型
基本数据类型：String,Number,undefined,Boolean,null
引用数据类型：Object,Function,Array
区别 :
1,引用类型都有自己的原型,可以自己扩展属性,但是值类型不行
2,所有的引用类型的__proto__指向 他构造函数的prototype
3,值类型用typeof来检测数据类型,引用类型用instanceof检测

9.检查数据类型的方法及其区别

1.typeof：用来检测数据类型的运算符，返回值为字符串，返回的字符串包含对应的数据类型
缺点：typeof null => “object”
不能具体区分对象数据类型的值，无法检测是正则还是数组
优点：使用方便，多用于检测基本数据类型（除null）
typeof 运算符返回表达式的数据类型：“number”、“string”、“boolean”、“object”、“function” 和 “undefined”。

未定义，返回的就是 “undefined”
数字返回"number"
字符串返回"string"
布尔值返回"boolean"对象
数组和null返回 “object”
函数返回"function"

2.instanceof:用来检测实例是否隶属于某个类的运算符，返回值：true/false
缺点：不能处理基本数据类型值
只要在当前实例的原型链（proto）上出现过的类，检测结果都是true
优点：使用条件限制不高时，可以快速检测某个实例是否隶属于某个类

3.constructor:构造函数，返回值：true/false
缺点：实例的constructor太容易被修改了
优点：实例的constructor未被修改时，可以检测数据类型
4.object.prototype.toString.call()，返回值：“[object 所属类]” 例如：“[object Array]”

实现原理：
obj.toString.call([value])
1.首先基于原型链查找机制，找到object.prototype.toString()
2.把找到的方法执行，方法中的this -> obj
3.call()方法执行,更换this -> [value]
4.方法内部this([value])所属类的信息输出

缺点：使用不便捷
优点：满足所有数据类型的检测

10.null和undefined区别

1.区别：
null 表示一个对象被定义了, 值为"空值"；
undefined：表示不存在这个值。
undefined：表示不存在这个值。是一个表示“无”的原始值或者说表示“缺少值”，就是此处应该有一个值，但是还没有定义。当尝试读取时会返回 undefined；例如变量被声明了，但是没有赋值是，就等于undefined

typeof undefined //“undefined”

null：是一个对象（空对象，没有任何属性和方法），例如作为函数的参数，表示该函数的参数不是对象；
注意：在验证null时，一定要使用 === ，因为 == 无法分别 null 和 undefined
2.用法：
undefined 表示”缺少值“，就是此处应该有一个值，但是还没有定义。典型用法是：
（1） 变量被声明了，但是没有赋值，就等于 undefined。
（2）调用函数时，应该提供的参数没有提供，该参数等于 undefined。
（3）对象没有赋值的属性，该属性的值为 undefined。
（4）函数没有返回值时，默认返回 undefined。
null 表示“没有对象”，即该处不应该有值。典型用法是：
（1）作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点

null是不存在,undefined错误、不明确、未定义