220518.srt

1
00:00:00,133 --> 00:00:00,999
大家好我是山月

2
00:00:01,000 --> 00:00:04,600
今天面试一位明年毕业大三的同学

3
00:00:04,600 --> 00:00:05,933
喂你好

4
00:00:06,900 --> 00:00:08,766
你好

5
00:00:08,800 --> 00:00:10,666
你这两个项目经验

6
00:00:10,700 --> 00:00:12,700
项目经历里边

7
00:00:13,133 --> 00:00:14,366
因为他有代码了嘛

8
00:00:14,366 --> 00:00:17,199
然后你也可以放一个域名

9
00:00:17,200 --> 00:00:18,700
部署上去

10
00:00:18,700 --> 00:00:21,166
然后让面试官可以看到效果

11
00:00:21,266 --> 00:00:22,766
这样就比较好一点

12
00:00:24,000 --> 00:00:25,466
哦，了解

13
00:00:26,466 --> 00:00:30,366
对，比如说你可以使用 vercel 之类的(进行部署)

14
00:00:32,366 --> 00:00:32,699
哦

15
00:00:32,700 --> 00:00:35,066
就是把它部署在服务器上面

16
00:00:35,066 --> 00:00:37,933
然后就是比较方便看一些

17
00:00:38,166 --> 00:00:40,733
嗯对。然后 vercel 这个有没有听过

18
00:00:40,733 --> 00:00:43,933
就是在这上边，没有服务器

19
00:00:43,933 --> 00:00:46,199
只有项目也可以把它部署上去

20
00:00:47,533 --> 00:00:49,766
嗯

21
00:00:49,900 --> 00:00:51,933
我下去再改一下

22
00:00:54,366 --> 00:00:55,799
嗯行好

23
00:00:57,566 --> 00:01:01,299
嗯好。然后我问你一些就是专业技能

24
00:01:01,300 --> 00:01:04,266
就是一些基础问题吧

25
00:01:04,966 --> 00:01:08,066
你说下垂直居中怎么做

26
00:01:09,266 --> 00:01:11,166
垂直居中的话

27
00:01:11,300 --> 00:01:16,333
可以分为块元素和行内元素啊

28
00:01:16,500 --> 00:01:18,733
比如说

29
00:01:18,733 --> 00:01:21,499
display flex 弹性布局

30
00:01:21,866 --> 00:01:26,366
display grid 就是网格布局

31
00:01:26,533 --> 00:01:30,066
他是不管是行内元素还是块元素

32
00:01:30,066 --> 00:01:31,933
都可以实现的

33
00:01:31,933 --> 00:01:34,799
然后你把父元素 display:flex

34
00:01:34,800 --> 00:01:37,200
或者 display:grid

35
00:01:37,200 --> 00:01:38,600
然后设置

36
00:01:49,300 --> 00:01:53,633
align-items:center 和 justify-content:center

37
00:01:53,900 --> 00:01:58,733
和那个...

38
00:01:59,033 --> 00:02:00,400
这个是对于

39
00:02:00,433 --> 00:02:03,866
块元素和行类元素都可以实现的

40
00:02:04,300 --> 00:02:05,100
嗯

41
00:02:05,833 --> 00:02:09,100
然后的话还有就是你可以去

42
00:02:09,333 --> 00:02:10,533
对于块元素的话

43
00:02:10,533 --> 00:02:13,333
你可以去使用

44
00:02:20,300 --> 00:02:23,133
就是绝对定位和相对定位...

45
00:02:23,133 --> 00:02:27,933
父元素设为...

46
00:02:28,700 --> 00:02:32,133
position:relative

47
00:02:32,133 --> 00:02:35,333
子元素设为 position:absolute

48
00:02:35,333 --> 00:02:37,800
然后的话设为那个

49
00:02:38,866 --> 00:02:40,200
那个子元素

50
00:02:40,200 --> 00:02:43,300
原本是应该在整个屏幕的左上角的

51
00:02:43,466 --> 00:02:46,733
你需要把那个他的左上角

52
00:02:47,433 --> 00:02:50,900
的位置移到整个屏幕最中心的位置啊

53
00:02:50,900 --> 00:02:52,700
就是使用那个

54
00:02:54,533 --> 00:02:56,933
margin-left 的那个

55
00:02:59,033 --> 00:02:59,833
呃

56
00:03:04,100 --> 00:03:06,266
就是他如果是知道宽高的话

57
00:03:06,266 --> 00:03:07,633
比如说我把...

58
00:03:07,633 --> 00:03:11,833
那个子元素他的宽高都为200

59
00:03:11,833 --> 00:03:13,033
那我就是

60
00:03:19,100 --> 00:03:25,266
left:-50%

61
00:03:25,300 --> 00:03:29,333
top:-50% 就是把他的那个

62
00:03:29,333 --> 00:03:31,900
左上角移到了屏幕的正中间

63
00:03:31,900 --> 00:03:32,866
然后的话

64
00:03:33,533 --> 00:03:35,933
你需要把整个元素居中的话

65
00:03:35,933 --> 00:03:37,900
就需要把它的那个

66
00:03:38,000 --> 00:03:39,700
实际是要把元素的

67
00:03:39,700 --> 00:03:42,133
中心点移到整个屏幕的正中间

68
00:03:42,133 --> 00:03:44,266
也就说你还需要向上移

69
00:03:44,466 --> 00:03:45,633
里元素的一半

70
00:03:45,633 --> 00:03:47,833
和向左引里元素的一半

71
00:03:47,833 --> 00:03:49,500
然后可以使用

72
00:03:49,500 --> 00:03:53,633
margin-left:-100px

73
00:03:53,733 --> 00:03:56,533
mangin-top:-100px

74
00:03:56,533 --> 00:03:57,833
然后除了这个以外

75
00:03:57,833 --> 00:04:00,633
你还可以去用那个 transform

76
00:04:00,700 --> 00:04:02,100
然后...

77
00:04:02,100 --> 00:04:06,333
transform -100px 和-100px

78
00:04:06,666 --> 00:04:08,066
或者如果你是

79
00:04:08,066 --> 00:04:10,300
不确定那个子元素的宽高的话

80
00:04:10,300 --> 00:04:12,066
你就可以使用

81
00:04:12,300 --> 00:04:19,000
transform translate -50% 这样子啊

82
00:04:19,966 --> 00:04:23,400
刚才使用 grid 然后还可以使用一个

83
00:04:23,900 --> 00:04:25,600
place-items:center

84
00:04:28,300 --> 00:04:30,566
网格布局和弹性布局

85
00:04:30,600 --> 00:04:33,400
对 grid 的话，一个属性就可以

86
00:04:34,566 --> 00:04:36,066
哦好的

87
00:04:37,766 --> 00:04:38,866
嗯

88
00:04:38,866 --> 00:04:41,066
你说下 css 变量吧

89
00:04:41,066 --> 00:04:42,866
然后他可以解决哪些问题

90
00:04:44,733 --> 00:04:48,366
css 变量...

91
00:04:51,300 --> 00:04:56,300
css 变量是 height

92
00:04:56,300 --> 00:04:56,933
这些吗

93
00:04:56,933 --> 00:05:00,500
还是说就是他的

94
00:05:00,533 --> 00:05:03,166
预处理里面的那个变量

95
00:05:03,400 --> 00:05:04,966
嗯变量就是

96
00:05:05,600 --> 00:05:08,566
他以一个杠杠开头的

97
00:05:08,566 --> 00:05:10,666
然后我们引用这个变量的时候通过

98
00:05:10,900 --> 00:05:12,533
var 这个关键词

99
00:05:12,533 --> 00:05:13,700
进行引用

100
00:05:13,700 --> 00:05:16,100
这是新出的一个 css 的特性

101
00:05:16,933 --> 00:05:18,666
那我不太了解

102
00:05:19,700 --> 00:05:21,533
嗯行好

103
00:05:23,900 --> 00:05:24,700
嗯

104
00:05:24,700 --> 00:05:27,266
那那你下去可以看一下 css 的变量这块

105
00:05:27,266 --> 00:05:30,300
他现在 css 变量用的还是蛮多的

106
00:05:30,333 --> 00:05:32,133
包括 tailwindcss

107
00:05:32,266 --> 00:05:35,766
然后还有一些比较流行的一些

108
00:05:37,133 --> 00:05:37,766
组件库

109
00:05:37,766 --> 00:05:41,000
然后他也用 csc 变量用的开始比较多了

110
00:05:42,000 --> 00:05:44,333
csc 3 里面新增的吗？

111
00:05:44,900 --> 00:05:45,700
嗯

112
00:05:46,566 --> 00:05:47,766
对 csc 3 之后

113
00:05:47,766 --> 00:05:50,933
他就是把 ccs 分成了一些模块了嘛

114
00:05:50,966 --> 00:05:53,600
然后这些模块各自增了一些东西

115
00:05:54,933 --> 00:05:56,133
哦

116
00:05:56,133 --> 00:05:58,200
开发还没有使用过

117
00:05:59,766 --> 00:06:01,266
嗯行好

118
00:06:02,066 --> 00:06:04,733
啊

119
00:06:05,166 --> 00:06:06,366
你用过一些

120
00:06:06,866 --> 00:06:08,866
css in js 的库吗

121
00:06:08,866 --> 00:06:11,500
就是你在平常开发 css 的时候

122
00:06:11,666 --> 00:06:15,133
是使用什么的方式去开发

123
00:06:17,500 --> 00:06:18,300
嗯

124
00:06:21,100 --> 00:06:24,933
就用过那个 jquery 用过一点

125
00:06:25,200 --> 00:06:28,766
然后的话 bootstrap

126
00:06:28,766 --> 00:06:31,166
就是那个自适应了解一点

127
00:06:31,166 --> 00:06:32,866
但是没怎么用

128
00:06:33,300 --> 00:06:35,866
对比较是用原生的一点

129
00:06:37,133 --> 00:06:39,300
比如说一些 less

130
00:06:39,300 --> 00:06:42,000
sass 也很少用吗？

131
00:06:43,300 --> 00:06:44,466
只是了解一点

132
00:06:44,466 --> 00:06:45,733
很少用

133
00:06:46,100 --> 00:06:47,800
我了解的那个 less

134
00:06:47,800 --> 00:06:49,766
sass 里面就是会啊

135
00:06:49,766 --> 00:06:52,366
比如说一些变量功就是把

136
00:06:52,466 --> 00:06:53,933
相当于把 css

137
00:06:54,133 --> 00:06:56,700
作为一种编译语言去使用吧

138
00:06:56,700 --> 00:06:58,366
像 javascript 这样

139
00:06:58,366 --> 00:07:01,100
就是给他一些变量啊或者什么的

140
00:07:01,200 --> 00:07:03,500
因为 css 本身就

141
00:07:03,666 --> 00:07:05,600
不太像一种编程语言

142
00:07:05,666 --> 00:07:07,733
如果很多的

143
00:07:08,000 --> 00:07:09,333
属性叠加在一起的话

144
00:07:09,333 --> 00:07:10,733
他的属性就又会改变

145
00:07:10,733 --> 00:07:14,333
他是就是多种属性去作用的那种结果

146
00:07:14,500 --> 00:07:15,966
就是我理解的然后 lees

147
00:07:15,966 --> 00:07:16,900
sass 这些

148
00:07:16,900 --> 00:07:19,700
就是使他更具有编译语言的特性

149
00:07:21,333 --> 00:07:22,700
好

150
00:07:23,133 --> 00:07:26,000
那你平常使用 css 去开发如何避免

151
00:07:26,266 --> 00:07:27,100
样式冲突

152
00:07:27,100 --> 00:07:28,933
如何避免这个类名冲突

153
00:07:31,700 --> 00:07:33,533
样式冲突

154
00:07:33,566 --> 00:07:36,933
把他的名字就是标的比较细吧

155
00:07:37,000 --> 00:07:38,266
比如说

156
00:07:38,266 --> 00:07:40,366
你去写头部的时候

157
00:07:40,366 --> 00:07:42,500
你就加头部比如说 header

158
00:07:42,500 --> 00:07:44,733
然后再是他的什么

159
00:07:44,733 --> 00:07:47,400
那样时候就不会去和尾部的什么

160
00:07:47,533 --> 00:07:49,933
相同的的元素去冲突

161
00:07:49,933 --> 00:07:50,733
大概这样

162
00:07:51,200 --> 00:07:52,933
写的细一点比如说 .header

163
00:07:52,966 --> 00:07:55,066
写成什么来着

164
00:07:56,333 --> 00:07:56,933
嗯

165
00:07:56,933 --> 00:08:01,366
就比如说你头部的标题你就点 .header-title

166
00:08:03,266 --> 00:08:04,066
呃

167
00:08:04,600 --> 00:08:07,700
就是把名字会写的细点这样子

168
00:08:12,533 --> 00:08:13,900
啊行好

169
00:08:13,933 --> 00:08:16,566
但是比如说你有个 .header-title

170
00:08:16,566 --> 00:08:19,166
然后其他的组件

171
00:08:19,166 --> 00:08:20,166
比如说在其他地方

172
00:08:20,166 --> 00:08:22,700
也有可能用到这个东西

173
00:08:22,966 --> 00:08:25,333
然后他有可能就会出现一些样式

174
00:08:25,333 --> 00:08:27,266
的冲突这种问题

175
00:08:29,166 --> 00:08:32,500
嗯那你可以去使用

176
00:08:33,100 --> 00:08:34,733
标签那样子吧

177
00:08:34,733 --> 00:08:36,166
现在父标签

178
00:08:40,933 --> 00:08:42,933
嗯那你知道

179
00:08:43,133 --> 00:08:44,000
vue 里边

180
00:08:44,000 --> 00:08:47,100
他是怎么去避免这个问题的吗

181
00:08:49,066 --> 00:08:50,400
不太了解

182
00:08:53,100 --> 00:08:54,200
嗯好

183
00:08:55,766 --> 00:08:58,700
嗯对我们平常处理的时候有

184
00:08:59,266 --> 00:09:02,066
有几种方案吧

185
00:09:02,333 --> 00:09:04,566
比如说有一个 css scope

186
00:09:04,566 --> 00:09:07,600
还有一个 css 的

187
00:09:09,733 --> 00:09:13,000
模块化之类的啊

188
00:09:15,200 --> 00:09:16,766
对，这个下去得看一下！

189
00:09:16,766 --> 00:09:19,900
这个还是比较重要的一点

190
00:09:21,100 --> 00:09:24,533
哦是 css 模块化是吧

191
00:09:27,066 --> 00:09:28,066
嗯对

192
00:09:30,466 --> 00:09:31,733
css module 吧

193
00:09:32,600 --> 00:09:34,800
还有一个 css scope

194
00:09:42,300 --> 00:09:44,566
好那我们

195
00:09:44,800 --> 00:09:45,766
在 css 中

196
00:09:45,766 --> 00:09:48,466
它的选择器的权重是什么样子的

197
00:09:49,666 --> 00:09:54,200
嗯权重的话，权重最高的是那个

198
00:09:54,266 --> 00:09:55,000
@import

199
00:09:55,000 --> 00:09:58,366
然后的话就是

200
00:10:01,866 --> 00:10:03,400
类选择器

201
00:10:09,333 --> 00:10:11,566
然后的话应该是

202
00:10:13,566 --> 00:10:14,900
类名选择器

203
00:10:14,900 --> 00:10:19,866
还有就是标签选择器这样子

204
00:10:19,866 --> 00:10:22,066
然后的话是就是

205
00:10:22,133 --> 00:10:24,666
他的那个权重的算法的话

206
00:10:24,666 --> 00:10:27,100
应该是乘10的样子呃

207
00:10:27,100 --> 00:10:28,300
比如说

208
00:10:28,533 --> 00:10:31,700
最低的标签选择器如果是1的话

209
00:10:31,700 --> 00:10:33,566
那类选择器就是10

210
00:10:33,566 --> 00:10:37,600
然后 @import 的话就是100

211
00:10:37,700 --> 00:10:39,933
就是呃如果说是

212
00:10:40,733 --> 00:10:42,200
先是一个

213
00:10:42,700 --> 00:10:44,066
一个类选择器

214
00:10:44,066 --> 00:10:45,866
然后底下带一个标签选择器

215
00:10:45,866 --> 00:10:48,300
那么他的权重就应该是11

216
00:10:48,300 --> 00:10:52,000
就大概是这样的去确定一个元素

217
00:10:52,000 --> 00:10:54,733
他所有的那个选择器加起来

218
00:10:54,733 --> 00:10:57,133
就确定这个元素的权重

219
00:10:58,266 --> 00:11:00,900
嗯好你刚才说到的一个是

220
00:11:01,600 --> 00:11:03,766
@import 这个是什么

221
00:11:04,900 --> 00:11:06,400
呃非常重要

222
00:11:06,666 --> 00:11:09,400
就是最重要的啊应该是 important

223
00:11:10,300 --> 00:11:11,166
哦 important

224
00:11:12,966 --> 00:11:14,766
那也不是 

225
00:11:14,766 --> 00:11:16,766
应该是感叹号 important

226
00:11:17,500 --> 00:11:18,933
啊哦

227
00:11:19,700 --> 00:11:21,066
啊他好我

228
00:11:21,266 --> 00:11:23,766
我有时候看到是那个 @

229
00:11:24,333 --> 00:11:25,666
就是那个

230
00:11:27,133 --> 00:11:28,700
你是不是记记错了 @

231
00:11:29,100 --> 00:11:29,733
@import

232
00:11:29,733 --> 00:11:32,966
应该是引入一个 css 的一个样式

233
00:11:32,966 --> 00:11:33,933
这样子的

234
00:11:41,766 --> 00:11:44,600
它前面应该是一个感叹号

235
00:11:45,600 --> 00:11:46,766
哦好的

236
00:11:46,766 --> 00:11:48,366
那我可能记错了

237
00:11:50,766 --> 00:11:52,733
嗯好嗯

238
00:11:52,733 --> 00:11:56,800
然后刚才说的是比 class 高的是什么

239
00:11:58,900 --> 00:11:59,566
呃

240
00:11:59,566 --> 00:12:02,966
类选择器、标签选择器还有一个

241
00:12:03,933 --> 00:12:08,266
!important 还有一个属性

242
00:12:08,333 --> 00:12:10,066
属性选择器还是啥吧

243
00:12:10,100 --> 00:12:11,733
标签类名

244
00:12:12,100 --> 00:12:15,066
对标签类名然后还还少一个什么

245
00:12:16,133 --> 00:12:18,000
还少了一个

246
00:12:21,666 --> 00:12:24,366
还少一个 id 选择还有个 id id id

247
00:12:24,400 --> 00:12:25,700
不好意思记得记起来

248
00:12:25,700 --> 00:12:26,500
id

249
00:12:27,133 --> 00:12:30,066
id 选择器 id 选择器

250
00:12:30,733 --> 00:12:34,066
对 id 选择器。他其实最重要的就是 id

251
00:12:34,066 --> 00:12:37,166
class 和 type 就是标签选择器这三个

252
00:12:37,266 --> 00:12:39,600
然后除此之外还有一些属性呀

253
00:12:42,866 --> 00:12:45,866
对对对对对对但是最重要是 id

254
00:12:45,866 --> 00:12:48,466
class 和 type 这三个肯定是要说

255
00:12:48,666 --> 00:12:49,966
说上来的这种

256
00:12:50,366 --> 00:12:51,466
好的好的

257
00:12:51,700 --> 00:12:52,866
忘记了一个

258
00:12:53,266 --> 00:12:54,733
记得是我三个

259
00:12:54,800 --> 00:12:57,133
我一般好像会用 class 多的一点

260
00:12:57,133 --> 00:12:59,966
因为 id 的话好像就是只有独一无二的

261
00:12:59,966 --> 00:13:00,766
但是

262
00:13:01,800 --> 00:13:04,800
class 好像就是可以重复的是吧

263
00:13:05,933 --> 00:13:06,733
嗯

264
00:13:08,566 --> 00:13:12,366
嗯对而且现在他还有新加了一个叫

265
00:13:12,366 --> 00:13:13,200
@layer

266
00:13:13,333 --> 00:13:15,466
一个 layer 层

267
00:13:15,500 --> 00:13:16,000
这个下去

268
00:13:16,000 --> 00:13:18,066
你也可以去看一下他和选择器

269
00:13:18,566 --> 00:13:21,666
他和 css 的这个权重也有关系

270
00:13:22,600 --> 00:13:25,366
哦哦对你

271
00:13:25,733 --> 00:13:28,100
就是这道题他是比较常问的

272
00:13:28,100 --> 00:13:29,600
要是面试官问你的时候

273
00:13:29,600 --> 00:13:30,733
你答到这个 layper

274
00:13:30,733 --> 00:13:32,966
有可能就是一个亮点吧

275
00:13:38,000 --> 00:13:42,600
嗯好嗯我们如何实现将我们的屏幕

276
00:13:43,300 --> 00:13:45,000
三等分

277
00:33:40,166 --> 00:33:41,766
浏览器那边

278
00:33:42,266 --> 00:33:46,933
那边返回的状态码是302 呃

279
00:33:46,933 --> 00:33:50,400
然后如果他判断他是就是

280
00:33:50,466 --> 00:33:52,166
还是在有效期内的话

281
00:33:52,166 --> 00:33:55,166
他就会返回200 ok 这样子

282
00:33:55,166 --> 00:33:58,766
然后他后面不会带有就是新的那个

283
00:33:58,900 --> 00:33:59,933
缓存文件

284
00:34:00,800 --> 00:34:03,166
嗯他应该是304

285
00:34:04,100 --> 00:34:05,733
304 对好吧

286
00:34:05,800 --> 00:34:07,100
记错了啊好的

287
00:34:07,133 --> 00:34:10,800
行好行那本次面试就到这里吧

288
00:34:11,366 --> 00:34:12,666
好的

289
00:34:12,666 --> 00:34:14,933
然后你下去也要对这些基础

290
00:34:14,933 --> 00:34:15,933
或者这些八股文

291
00:34:15,933 --> 00:34:18,166
再去多总结一下

292
00:34:18,166 --> 00:34:19,733
再去看一看

293
00:34:20,466 --> 00:34:21,266
啊

294
00:34:21,800 --> 00:34:24,800
对因为这些记性的东西比较多

295
00:34:25,933 --> 00:34:27,900
嗯行好