今天上午的面试刚结束，本来是计算在昨天第一次面试后结束写面经的，但考虑到调整心态的原因，在这次面试结束后，决定把这两次的面试放在一起总结，也节省时间。 题目顺序不一定是面试顺序，我会把最重要的放在首位，方便大家阅读学习。
一 .CSS（css问的比较多）
一.实现水平居中和垂直居中：
首先在display中有flex布局和grid布局
flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex布局</title>
<style>
.wrapper{
display: flex; // 父元素中声明flex属性
justify-content: center; // 默认水平居中
align-items: center; // 默认垂直居中
background-color: pink;
width: 300px;
height: 300px;
}
.box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">flex布局 </div>
</div>
</body>
</html>
grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid布局</title>
<style>
.wrapper{
display: grid;
width: 300px;
height: 300px;
background-color: pink;
/* place-items:center; */
}
.box{
width: 100px;
height: 100px;
background-color: red;
justify-self: center; /* 水平居中 */
align-self: center; /* 垂直居中 */
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box">grid布局</div>
</div>
</body>
</html>
然后在position中用绝对定位 absolute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位+transform 绝对定位+负margin</title>
<style>
div{
position: relative;
width: 300px;
height: 300px;
background-color: pink;
}
span{
position: absolute;
/* width: 100px;
height: 100px; */
background-color: red;
left:50%;
top:50%;
transform: translate(-50%,-50%);
/* margin-left: -50px;
margin-top: -50px; */
}
</style>
</head>
<body>
<div >
<span>1</span>
</div>
</body>
</html>
绝对定位+transform：
transform可以不用标明元素的宽度和高度
transform:translate(-50%,-50%);
transform的目的是将元素的1往左边和上面移动50%
要知道子元素的高度和宽度：
绝对定位+负margin：
将transform换成 margin-left: -50px; 用px的话要知道子元素的宽度
margin-top: -50px; 要知道子元素的高度
绝对定位+calc（读kiao,第四声）：
left:cale(50%-50px);
top: calc(50% - 50px);
二.position有哪些属性？
在CSS中，position 属性用于控制元素的定位方式。它决定了元素如何在页面上布局，以及它与其他元素的关系。以下是一些常见的 position 属性值及其作用，一共有5种属性，我会用通俗易懂的话来解释。
1. static
- 作用：元素使用默认的定位方式。
- 特点：
- 这是默认值，元素会按照正常的文档流布局，不会受到
top、right、bottom、left和z-index属性的影响。
- 这是默认值，元素会按照正常的文档流布局，不会受到
- 例子：
- 假设你有一排文字，每个文字都按照正常的顺序排列，不会有任何特殊的位置调整。
2. relative
- 作用：元素相对于它原来的位置进行偏移。
- 特点：
- 元素仍然在文档流中，但可以通过
top、right、bottom和left属性进行偏移。 - 偏移后，原来的位置仍然被保留，不会影响其他元素的布局。
- 元素仍然在文档流中，但可以通过
- 例子：
- 假设你有一排文字，你把其中一个字稍微向右移动了一点，但其他字的位置不变。
3. absolute
- 作用：元素相对于最近的已定位（非
static）祖先元素进行定位。 - 特点：
- 如果没有祖先元素是已定位的（即设置了
position为relative、absolute或fixed），则相对于初始包含块（通常是HTML文档的<html>标签）。 - 元素会从文档流中移除，不会影响其他元素的布局。
- 如果没有祖先元素是已定位的（即设置了
- 例子：
- 假设你有一排文字，你把其中一个字拿出来，放在页面的某个特定位置，其他字的位置不变。
4. fixed
- 作用：元素相对于浏览器窗口进行定位。
- 特点：
- 元素会从文档流中移除，不会影响其他元素的布局。
- 即使页面滚动，元素也会保持在浏览器窗口的固定位置。
- 例子：
- 假设你有一个导航栏，你希望它始终显示在浏览器窗口的顶部，即使你滚动页面，导航栏也不会消失。
5. sticky
- 作用：元素在滚动到特定位置时，会变成固定定位。
- 特点：
- 元素在文档流中正常布局，直到它滚动到指定的位置，然后它会变成固定定位。
- 通常用于导航栏或侧边栏，当用户滚动页面时，这些元素会固定在某个位置。
- 例子：
- 假设你有一个侧边栏，当用户滚动页面时，侧边栏会固定在页面的右侧，直到用户滚动到页面的底部。
总结
static：默认值，元素按照正常文档流布局，不会偏移。relative：元素相对于自己原来的位置偏移，但不会影响其他元素。absolute：元素相对于最近的已定位祖先元素定位，从文档流中移除。fixed：元素相对于浏览器窗口定位，即使页面滚动，元素位置不变。sticky：元素在滚动到特定位置时，会变成固定定位，通常用于导航栏或侧边栏。
实际例子
假设你有一个网页，包含一个导航栏、一个内容区和一个侧边栏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position Example</title>
<style>
body {
font-family: Arial, sans-serif;
}
.navbar {
position: fixed; /* 固定定位 */
top: 0;
width: 100%;
background-color: #333;
color: white;
padding: 10px;
}
.sidebar {
position: sticky; /* 粘性定位 */
top: 60px; /* 当滚动到距离顶部60px时固定 */
background-color: #f2f2f2;
padding: 10px;
height: 200px;
}
.content {
margin-top: 50px; /* 为导航栏留出空间 */
padding: 20px;
}
</style>
</head>
<body>
<div class="navbar">导航栏</div>
<div class="content">
<h1>内容区</h1>
<p>这是一个很长的内容区，你可以滚动看看效果。</p>
<div class="sidebar">侧边栏</div>
</div>
</body>
</html>
在这个例子中：
- 导航栏 使用了
fixed定位，始终固定在页面顶部。 - 侧边栏 使用了
sticky定位，当滚动到距离顶部60px时，会固定在页面上。 - 内容区 使用了默认的
static定位，正常布局。
希望这些解释和例子能帮助你更好地理解 position 属性的不同值及其作用！
三.CSS的权重
1. 权重的基本概念
想象一下，你早上起床准备穿衣服。你有几件衣服可以选择，但每件衣服的优先级不同。CSS选择器的权重也类似，决定了哪个规则会最终生效。
2. 权重的计算方法
我们用穿衣服的顺序来类比CSS选择器的权重。权重高的规则会覆盖权重低的规则。如果权重相同，则后定义的规则会生效。
3. 具体例子
假设你有以下几件衣服：
- T恤：最普通的基础款T恤。
- 衬衫：比T恤更正式一点。
- 西装外套：非常正式，优先级最高。
- 内衬：穿在最里面的衣服，优先级最高。
4. 权重计算
- T恤（标签选择器）：最普通的基础款，优先级最低。
- 衬衫（类选择器）：比T恤更正式，优先级更高。
- 西装外套（ID选择器）：非常正式，优先级最高。
- 内衬（内联样式）：穿在最里面的衣服，优先级最高。
5. 具体例子
假设你有以下几件衣服：
- T恤：
p（标签选择器）- 权重：
(0, 0, 0, 1)
- 权重：
- 衬衫：
.text（类选择器）- 权重：
(0, 0, 1, 0)
- 权重：
- 西装外套：
#main（ID选择器）- 权重：
(0, 1, 0, 0)
- 权重：
- 内衬：
style="color: orange;"（内联样式）- 权重：
(1, 0, 0, 0)
- 权重：
6. 权重比较
- T恤 的权重是
(0, 0, 0, 1)，最低。 - 衬衫 的权重是
(0, 0, 1, 0)，比T恤高。 - 西装外套 的权重是
(0, 1, 0, 0)，比衬衫高。 - 内衬 的权重是
(1, 0, 0, 0)，最高。
7. 最终结果
- 内衬 的优先级最高，所以最终你会穿内衬。
- 如果没有内衬，你会穿 西装外套。
- 如果没有西装外套，你会穿 衬衫。
- 如果没有衬衫，你会穿 T恤。
8. CSS中的具体例子
假设你有以下HTML和CSS代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS权重示例</title>
<style>
/* 规则1：T恤 */
p {
color: red; /* 权重：(0, 0, 0, 1) */
}
/* 规则2：衬衫 */
.text {
color: green; /* 权重：(0, 0, 1, 0) */
}
/* 规则3：西装外套 */
#main {
color: blue; /* 权重：(0, 1, 0, 0) */
}
/* 规则4：内衬 */
p.text {
color: yellow; /* 权重：(0, 0, 1, 1) */
}
/* 规则5：内衬 */
p#main {
color: purple; /* 权重：(0, 1, 0, 1) */
}
</style>
</head>
<body>
<p id="main" class="text" style="color: orange;">这是一个段落。</p>
</body>
</html>
9. 权重计算
- 规则1：
p（T恤）- 权重：
(0, 0, 0, 1)
- 权重：
- 规则2：
.text（衬衫）- 权重：
(0, 0, 1, 0)
- 权重：
- 规则3：
#main（西装外套）- 权重：
(0, 1, 0, 0)
- 权重：
- 规则4：
p.text（衬衫 + T恤）- 权重：
(0, 0, 1, 1)
- 权重：
- 规则5：
p#main（西装外套 + T恤）- 权重：
(0, 1, 0, 1)
- 权重：
- 内联样式：
style="color: orange;"（内衬）- 权重：
(1, 0, 0, 0)
- 权重：
10. 最终结果
- 内衬 的权重最高，所以段落的颜色会是
orange。 - 如果去掉内联样式，段落的颜色会是
purple（规则5）。 - 如果去掉规则5，段落的颜色会是
blue（规则3）。 - 如果去掉规则3，段落的颜色会是
yellow（规则4）。 - 如果去掉规则4，段落的颜色会是
green（规则2）。 - 如果去掉规则2，段落的颜色会是
red（规则1）。
11. 总结
- 内衬（内联样式）的优先级最高。
- 西装外套（ID选择器）的优先级比 衬衫（类选择器）高。
- 衬衫（类选择器）的优先级比 T恤（标签选择器）高。
- 如果权重相同，后定义的规则会覆盖先定义的规则。
希望这些例子能帮助你更好地理解CSS选择器的权重！
二.JS
1.数组的一些常用方法：
会改变原数组：push、pop、shift、unshift、splice、reverse和sort。
方法不会改变原数组：concat、slice、filter、map、reduce、some和every等
2.数组去重
new set()，indexOf()，sort()，filter()，reduce()等
new set()方法是最简单的：
let arr=[1,2,3,4,1,2]
console.log(new Set(arr)); //{1, 2, 3, 4} new set()返回的是对象
console.log(Array.from( new Set(arr))); //[1, 2, 3, 4]
console.log([...new Set(arr)]); //[1, 2, 3, 4]
//面试的时候可能会让你封装成一个函数
function unique(arr){
return [...new Set(arr)]
}
console.log(unique(arr));//[1, 2, 3, 4]
以下是indexOf()方法:
let arr=[1,2,3,4,1,2];
function unique(arr){
let newArr=[];
for(let i=0;i<arr.length;i++){
if(newArr.indexOf(arr[i])==-1){
newArr.push(arr[i]);
// 如果当前元素不存在于 newArr 中，
// 则使用 push 方法将其添加到 newArr 的末尾
}
}
return newArr;
}
console.log(unique(arr));//[1, 2, 3, 4]
以下是sort()方法:
let arr=[1,2,3,4,1,2];
function unique(arr){
arr=arr.sort();
let newArr=[];
for(let i=0;i<arr.length;i++){
if(arr[i]!=arr[i+1]){
newArr.push(arr[i]);
}
}
return newArr;
}
console.log(unique(arr));
除此之外还有map方法和JSON.stringify方法等等....
去重一句话：
“简单用 Set，复杂用 Map，要 key 就 Map，要深度就 JSON.stringify。”
3.异步编程是什么？promise中的async和await是如何解决回调地狱的？
我们先说说如果没有异步编程的话会怎么样呢？
就像上面这张图一样，层层嵌套。
众所皆知，js是一门单线程语言，也只能一次只能执行一个任务， 如果遇到一个大任务，这样就会导致阻塞
而异步编程就是在你执行大任务阻塞线程的时候， 异步编程会将这些任务放入任务队列中， 等主线程执行完了，再去执行任务队列中的任务，
而有了promise之后，让程序在等待耗时操作时，可以去干别的事情，从而提高效率和响应性。
但同时我用了promise.all,他的作用是JavaScript 中用来并发执行多个异步任务的工具。
只要所有 Promise 都成功，它就一次性返回所有结果；
只要有一个失败，就立刻整体失败。
promise和async/await是如何解决回调地狱的的？
简单来说它们是基于promise之上的一个语法糖，可以让异步操作更加简单明了。
async function f(){
}
f();
async标明函数为异步函数， await表示“我等等”，但不阻塞主线程 我们不能在全局函数中使用await关键字，await只能在async函数中使用
✅ 总结一句话：
异步编程 = 让程序“边等边干别的”，更高效、不卡顿。
由于面试题目详细介绍篇幅过长，就先介绍一部分，之后的内容会在下篇文章展示，有什么新的问题也欢迎评论区提问。
