重庆大三女生刚学了两个月前端面试实录、面经及视频

点击加入字节豆包 MarsCode 合伙人，免费领京东卡🎁，拿万元现金💰，点击查看 →

本次的候选人大三，刚学前端几个月，对于八股文还不是很熟练，在2022年的寒冬找到实习，需要再下一份苦工。

以下是面试记录

视频版: 重庆大三女生刚学了两个月前端面试实录，这像不像刚学前端的你们，八股文一定要背熟

以下是简历大致内容:

山月的面试问题记录

vercel
垂直居中
- grid
- flex
css 变量 ❎
- var
css 开发
- jquery
- bootstrap
- less/sass
如何避免样式冲突
- https://q.shanyue.tech/fe/css/493.html
- css module
- css scope
- BEM
选择器权重
- https://q.shanyue.tech/fe/css/311.html
- !important
- id/class/type
- @layer ✅
屏幕三等分
- grid
reset css ❎
- https://q.shanyue.tech/fe/css/549.html
localstorage/sessionstorage
跨域 ✅
- https://q.shanyue.tech/fe/dom/216.html
事件委托
0.1 + 0.2 ❎
- https://devtool.tech/double-type
Promise.all
v-if/v-show ❎
- https://q.shanyue.tech/fe/vue/90.html
display:none 与 opacity: 0 的区别
节流和防抖
http
- 资源缓存
- https://q.shanyue.tech/base/http/80.html
- 304 ❎

候选人的面经

水平垂直居中

弹性布局和网格布局对行内元素，块级元素都适用

.father {
    display: flex;  /*或display: grid;*/
    justify-content: center;
    align-items: center;
}

单行行内元素 line-height与height相同，text-align: center;
多行的行内元素
块级元素
```
.father {
    position: relative;
}
.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
```
1.使用相对定位，子元素的左上角原始是在屏幕左上角，使用left:50%,right:50%使子元素的左上角移到屏幕正中央，此时要使子元素垂直水平居中，需要把子元素向左和向上移动宽高的一半。
- 若宽高未知，子元素使用transform: translateX(-50%) translateY(-50%);
- 若宽高已知（均为100px），子元素使用transform: translateX(-50px) translateY(-50px); 或者子元素使用margin-left: -50px; margin-top: -50px;
2.对于宽高已知的子元素同样也可以使用子绝父相，然后把子元素top,bottom,left,right都设为0,margin设为auto。

CSS变量

CSS变量可以访问 DOM，可以创建具有局部或全局范围的变量，使用 JavaScript 和媒体查询来修改变量。var() 函数用于插入 CSS 变量的值。全局变量可以在整个文档进行访问使用，局部变量只能在声明它的选择器内部使用。
:root声明的是全局变量，如果是一个自定义属性用—作为前缀，使用时比如: var(—blue)就和#1e90ff相等
```
:root{ 
  --blue: #1e90ff;
}
.father{ 
  background-color: var(--blue);
}
```
使用CSS变量的好处：

1.可维护性
如果没有CSS变量需要手动改变大量的属性值，使用批量处理查找和替换，可能会影响其他样式规则。使用CSS变量只用改变定义时的值。

2.提高CSS可读性
可以通过变量名判断属性内容
使用CSS变量要注意大小写敏感，不要把长度的变量用于颜色属性等。

CSS Modules

CSS Modules加入了局部作用域和模块依赖，保证某个组件的样式而不会影响其他组件的样式。
一般使用webpack的css-loader实现CSS Modules，webpack配置中style-loader!css-loader?modules,在css-loader后添加查询参数modules,表示打开CSS Modules功能。
CSS Modules一些使用

1.CSS Modules产生局部作用域，通过构建工具将类名编译成一个哈希字符串，css和js都会同时编译成唯一的哈希字符串。

2.CSS Modules使用:global(.className)的语法声明一个全局规则。凡是这样声明的class，都不会被编译成哈希字符串。:local(.className)是局部作用域写法，和.className相同。

3.在webpack配置文件里可以实现定制哈希字符串的格式。

4.可以实现组合样式，不是将设置背景颜色的代码放入了.title中，而是使用这两个类，哈希值里面有这两个值。
```
.bg-color {
  background-color: black;
}
.title {
  /* 这里可以组合多个类 如：composes: bg-color bg1 bg2; */
  composes: bg-color;
  color: #fff;
}
```
5.输入其他模块
```
/*another.css文件中*/
.className {
 height: 200px;
 }
 .title {
     composes: className from './another.css';
 }
```
6.定义变量
- @value blue: #0c77f8;
- @value red: #ff0000;
- @value green: #aaf200;
  
  引入变量
  - @value colors: ”./colors.css”;
  - @value blue, red, green from colors;

三栏布局

clac计算布局

<style>
        .outer {
            width: 100%;
            min-width: 600px;
        }
        .side {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .mid {
            float: left;
            width: calc(100% - 600px);
            height: 300px;                            
            background-color: lightgreen;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="side left"></div>
        <div class="side right"></div>
        <div class="mid"></div>                    //可以交换位置
    </div>  
</body>

定位布局

<style>
    .outer {
        position: relative;
    }
    
    .inner {
        position: absolute;
        top: 0;
        height: 300px;
        background-color: orange;
    }
    
    .left {
        left: 0;
        width: 300px;
    }
    
    .right {
        right: 0;
        width: 300px;
    }
    
    .mid {
        left: 300px;
        right: 300px;
        background-color: lightgreen;
    }
</style>
</head>
 
<body>
    <div class="outer">
        <div class="inner left"></div>
        <div class="inner right"></div>
        <div class="inner mid"></div> //可以交换位置
    </div>
</body>

flex布局

<style>
    .outer {
        display: flex;
    }
    
    .inner {
        width: 300px;
        height: 300px;
        background-color: orange; // 先三个一样的300px盒子  
    }
    
    .mid {
        flex: auto;
        background-color: lightgreen; //中间的盒子弹性布局
    }
</style>
</head>
 
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner mid"></div> //注意中间位置不能换
        <div class="inner"></div>
    </div>
</body>

事件委托

就是事件代理，只指定一个事件处理程序，管理某一类型所有事件。把一个元素的响应事件（click、keydown…）的函数委托倒另一个元素。
事件流会经过三个阶段：捕获阶段->目标阶段 ->冒泡阶段，事件委托在冒泡阶段完成。事件委托会把一个或一组元素绑定到目标元素的外层元素身上，这样点击目标元素会冒泡到外层元素触发操作。
使用场景:点击li标签触发操作，但给每个li分别绑定事件需要绑定很多次，事件委托就是给li的父元素ul绑定事件，可能还存在ul里面其他元素冒泡触发事件，这时候要判断目标事件target的nodeName是不是li，如果是就触发操作，这样就只用绑定一次事件。在删除和新增批量元素时也尽量使用事件委托将事件绑定在外层父元素。
适合事件委托的事件有： click , mousedown , mouseup , keydown , keyup , keypress

如何避免CSS样式冲突

1.使用后代选择器或子代选择器，描述越多越细，优先级越高，优先级高的覆盖优先级低的描述。

2.改变CSS样式顺序，相同类型选择器指定的样式，后面的会覆盖前面的。

3.使用css module和css scope都可以生成唯一属性, css scope是在vue的style标签上的，并不能完全避免，全局如果有一个同名的类名仍然不能区分。

4.使用BEM命名，组件内部元素的名字都加上组件名，并用元素的名字作为选择器，即规定为：block-name__element-name—modifier-name，也就是模块名 + 元素名 + 修饰器名。BEM命名禁止使用子代选择器，会使权重增大，如果需要后面的样式覆盖需要额外增加更多的选择器，且命名紊乱。

reset css和normalize.css区别

Normalize 相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。
Reset 相对「暴力」，不管有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。

0.1+0.2不等于0.3

JavaScript中表示数只有number类型，整数和小数都用双精度浮点数表示(64bit)

符号位(1bit): 表示正负号
指数位(11bit): 表示次方数
尾数位(52bit): 表示精确度

0.1和0.2都不能用64位精确储存，准确存储它们的值位数要比64位长，但采用双精度浮点数表示只能存储64位，也就是实际存储的不是0.1和0.2,只是与它们相近的值，所以最后不是0.1和0.2相加，也就不等于0.3。

山月对面经的个人意见

仅代表个人意见

markdown 书写水平需要提高一点点…
垂直水平居中问题，先答 flex 布局，为使用之最广泛的解决方案，再答 grid 布局，体现自己对前沿(不算很前沿)css的了解，再答绝对定位+top+translate。其余可先不答，除非面试官问。
三列布局中的一个答案还用到了 float，现在写 css 很少用到 float 了，不宜放在第一个回答，回答还是以 flex/grid 为主

字幕

可对照字幕与视频进行快速浏览:

见 https://github.com/shfshanyue/Daily-Question/blob/master/mock/220518.srt

220511. 两年广州期望14 220522. 大二成都期望实习