前端面试总结（一）_偏移的参考点都需要使用的数据类型-CSDN博客

本文链接：https://blog.csdn.net/weixin_45558862/article/details/109185742

1.对HTML5缓存的了解

客户端存储数据的两个对象为：

localStorage：用于长久保存整个网页的数据，保存的数据没有过期时间，直到手动删除。
sessionStorage：用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。

用法（localStorage和sessionStorage类似）：

保存数据：localStorage.setItem(key,value)
读取数据：localStorage.getItem(key)
删除单个数据：localStorage.removeItem(key)
删除所有数据：localStorage.clear()
得到某个索引的key：localStorage.key(index)

2.关于行内元素、行内块级元素、块级元素的区分

行内元素：宽高设置无效，对margin仅在左右方向有效，上下无效，不自动换行。

<span>内联容器
<strong>粗体强调
<b>粗体
<i>斜体
<select>下拉列表
<a>链接

行内块级元素：不自动换行，可设置宽高和内外边距

<img>图片
<button>按钮
<input>输入框
<code>
<audio>音频
<video>视频

块级元素：独占一行，可设置宽高，块级元素中可包含块级元素和行内元素，块级文字元素中不能放入其他块级元素。

<div>块级容器
<h1>~<h6>标题
<p>段落
<ul>无序列表
<ol>有序列表
<dl>自定义列表
<table>表格
<form>表单

3.input有哪些类型？

text——文本
password——密码
number——数字
button——按钮
reset——重置
submit——提交
hidden——隐藏
radio——单选
checkbox——复选
file——选择文件按钮
image——图片
color——选择颜色
range——选择范围
date——日期选择框（年月日）
month——日期选择框（年月）
week——日期选择框（xx年的第x周）
time——时间选择（几点几分）
datetime-local——日期选择（年月日时分）

4.css的几种引入方式

内联式：直接在标签中定义style属性，因为内容和样式仍在一起，不方便，不常用。
嵌入式：在的

5.css几种引入方式的优先级

就近原则
理论上：行内>嵌入>链接>导入
实际上：嵌入，链接，导入在同一个文件头部，谁离相应的代码近，谁的优先级高。

6.让一个div水平垂直居中的方法

给盒子设置绝对定位，将上下左右都设置为0，margin设置为auto。

div{
	width:200px;
	height:200px;
	background:green;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	right:0;
	margin:auto;
}

给盒子设置绝对定位，将left，top设置为50%，然后margin-left和margin-top设置为负值盒子的一半大小。

	width:200px;
	height:200px;
	background:green;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-100px;
	margin-top:-100px;

利用flex弹性布局，父盒子的display设置为flex，justify-content和align-items都设置为center，这样盒子就水平垂直居中了。

.box{
	height:600px;
	display:flex;
	justify-content:center;
	align-items:center;
}
.box>div{
	width:200px;
	height:200px;
	background:green;
}

7.三种定位的解释，区别

absolute：绝对定位，偏移的参考点是：相对于最近的已定位的父元素，如果没有则相对于body 元素。
relative：相对定位，偏移的参考点是：相对于元素在普通流中的原来位置。
fixed：固定定位，偏移的参考点是：相对于浏览器屏幕。

relative和fixed偏移后，div原来所占位置不会被下面的div占据。

absolute偏移后，意味着它失去了文档流的位置，后面的文档流会紧跟着补上来接替它们的位置。

子绝父相：子元素绝对定位，父元素相对定位，让子元素以其父元素为标准来定位。如果不这么做，子元素就会相对body或浏览器定位，产生不好的效果。

8.float和position的区别

float：元素从文档流中移除，但会保持元素的容器大小，置于元素的最左边或最右边（即保留部分的流动性，未脱离文档流）
position：absolute：绝对定位的元素脱离了文档流和文本流。在布置文档流中其他元素时，绝对定位元素不占据空间。
总结：float和absolute都失去了在文档流中的正常位置，但float保留了在文档流中的容器，只是位置发生了改变，而absolute彻底脱离了文档流，形成了一个依附于祖先元素的文档容器。

9.javascript的几种基本数据类型

string
number
boolean
undefined
null

10.说几种数组方法

join()：将数组的元素组成一个字符串，以括号内参数为分隔符，省略的话，则默认逗号分隔。
push()：可以接收任意数量的参数，把他们逐个添加到数组末尾，并返回修改后数组的长度。
pop()：移除数组最后一个元素，减少数组的长度，然后返回移除的项。括号内无参数，即使有参数，也是删除最后一项。
shift()：删除原数组第一项，并返回删除的元素的值，如果数组为空则返回undefined。
unshift()：将参数添加到原数组开头，并返回数组的长度。
sort()：按升序排列数组项，即由小到大。
reverse()：反转数组项的顺序。
concat()：将参数添加到原数组中，这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组，在没有concat()方法传参时，他只是复制当前数组并返回副本。
slice()：返回从原数组中指定开始下标到结束下标之间的项组成新数组，可接受一或两个参数，在只有一个参数的情况下，slice()方法返回从该参数指定位置开始到末尾的所以项。如果有两个参数，返回起始和结束位置之间的项，但不包括结束位置的项。
splice()：很强大的数组方法，可以实现删除、插入和替换。
删除：两个参数，要删除的第一项的位置和要删除的项数，例如：splice(0,2)会删除数组的前两项。
插入：三个参数，起始位置，要删除的项数（0），要插入的项。例如：splice(2,0,4,6)会从当前数组的位置2开始删除0项并插入4和6这两项。
替换：三个参数，起始位置，要删除的项数，要插入的项。例如：splice(2,1,4,6)会删除当前数组的位置2的项，然后再从位置2开始插入4和6这两项。

11.对闭包的理解

正常情况下，在js语言中，函数内部可以读取全局变量，但在函数外部无法读取函数内部的局部变量。
但有时候就是需要获取到函数内部的局部变量，这时就需要在函数内部再定义一个函数，这个内部函数就可以获取到外部函数的变量了。
这个在函数内定义的函数就是闭包。
对闭包的理解：闭包就是在函数内定义的函数，是能够读取其他函数内部变量的函数。
闭包的用途：读取函数内部的变量；让这些局部变量的值始终保持在内存中，不会被自动清除。
使用闭包的注意点：闭包会让变量不被清除，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，导致内存泄漏；闭包会在父函数外部改变父函数内部变量的值。