diff --git a/Readme.md b/Readme.md index 127799a2..7b7fb089 100644 --- a/Readme.md +++ b/Readme.md @@ -2,7 +2,7 @@ + [山月的博客点击这里](https://github.com/shfshanyue/blog) + [一日一题官方网站点击这里](https://q.shanyue.tech) -+ [一日一题 bilibili 讲解点击这里](https://account.bilibili.com/account/home)，每天晚上九点十分B站直播讲解面试题。 ++ [一日一题 bilibili 讲解点击这里](https://space.bilibili.com/28696526)，每天晚上九点十分B站直播讲解面试题。 > 勤学如春起之苗，不见其增，日有所长；辍学如磨刀之石，不见其损，日有所亏。 diff --git a/deploy/oss-rclone.md b/deploy/oss-rclone.md index b112d336..bf8e8418 100644 --- a/deploy/oss-rclone.md +++ b/deploy/oss-rclone.md @@ -80,8 +80,12 @@ for await (const entry of readdirp('./build', { depth: 0, type: 'files' })) { 1. 断点续传 1. 压缩传输 +> 选择阿里云 oss 作为云存储时，配置时其 type 为 s3，其 provider 为 Alibaba + ``` bash # 将资源上传到 OSS Bucket +# alioss: 通过 rclone 配置的云存储名称，此处为阿里云的 oss，个人取名为 alioss +# shanyue-cra: oss 中的 bucket 名称 $ rclone copy --exclude 'static/**' --header 'Cache-Control: no-cache' build alioss:/shanyue-cra --progress # 将带有 hash 资源上传到 OSS Bucket，并且配置长期缓存 diff --git a/deploy/oss.md b/deploy/oss.md index 61d7a0af..98cbfe95 100644 --- a/deploy/oss.md +++ b/deploy/oss.md @@ -60,7 +60,9 @@ export PUBLIC_URL=https://cdn.shanyue.tech 1. 跨域配置 CORS (manifest.json 需要配置 cors) 1. 记住 Endpoint，比如 `oss-cn-beijing.aliyuncs.com`。将会在配置 PUBLIC_URL 中使用到 -最终的 PUBLIC_URL 为 `$Bucket.$Endpoint`，比如本篇文章示例项目的 PUBLIC_URL 为 `shanyue-cra.oss-cn-beijing.aliyuncs.com`。 +### PUBLIC_URL + +最终的 PUBLIC_URL 为 `$Bucket.$Endpoint`，比如本篇文章示例项目的 PUBLIC_URL 为 `https://shanyue-cra.oss-cn-beijing.aliyuncs.com`。 但是，你也可以配置 CNAME 记录并使用自己的域名。 @@ -86,6 +88,8 @@ $ ossutil config -i $ACCESS_KEY_ID -k $ACCESS_KEY_SECRET -e $ENDPOINT ``` bash # 将资源上传到 OSS Bucket +# --meta: 配置响应头，也就是这里的缓存策略 +# oss://shanyue-cra/: bucket 名字 $ ossutil cp -rf --meta Cache-Control:no-cache build oss://shanyue-cra/ # 将带有 hash 资源上传到 OSS Bucket，并且配置长期缓存 @@ -165,7 +169,7 @@ COPY --from=builder code/build /usr/share/nginx/html 在 `docker-compose` 配置文件中，通过 `build.args` 可对 `Dockerfile` 进行传参。 -而 `docker-compose.yaml` 同样不允许出现敏感数据，此时**通过环境变量进行传参**。在 `build.args` 中，默认从同名环境变量中取值。 +而 `docker-compose.yaml` 同样不允许出现敏感数据，此时**通过环境变量进行传参**。在 `build.args` 中，默认从宿主机的同名环境变量中取值。 > PS: 在本地可通过环境变量传值，那在 CI 中呢，在生产环境中呢？待以后 CI 篇进行揭晓。 @@ -177,7 +181,7 @@ services: context: . dockerfile: oss.Dockerfile args: - # 此处默认从环境变量中传参 + # 此处默认从宿主机(host)环境变量中传参 - ACCESS_KEY_ID - ACCESS_KEY_SECRET - ENDPOINT=oss-cn-beijing.aliyuncs.com diff --git a/mock/220518.md b/mock/220518.md index acf843f2..2fb66686 100644 --- a/mock/220518.md +++ b/mock/220518.md @@ -8,7 +8,7 @@ ![简历](https://static.shanyue.tech/images/22-05-18/clipboard-3191.421437.webp) -## 面试问题记录 +## 山月的面试问题记录 + vercel + 垂直居中 @@ -50,6 +50,248 @@ + + 304 ❎ +## 候选人的面经 + +## 水平垂直居中 +* 弹性布局和网格布局对行内元素，块级元素都适用 + ``` css + .father { + display: flex; /*或display: grid;*/ + justify-content: center; + align-items: center; + } + ``` +* 单行行内元素 line-height与height相同，`text-align: center;` +* 多行的行内元素 + ![image](http://rc5ru04li.hn-bkt.clouddn.com/%E5%9B%BE1.jpg) + ![image](http://rc5ru04li.hn-bkt.clouddn.com/%E5%9B%BE2.jpg) +* 块级元素 + ``` css + .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相等 + ``` css + :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计算布局 +``` css + + + +
+
+
+
//可以交换位置 +
+ +``` +* 定位布局 +``` css + + + + +
+
+
+
//可以交换位置 +
+ +``` +* flex布局 +``` css + + + + +
+
+
//注意中间位置不能换 +
+
+ +``` + +### 事件委托 + +* 就是事件代理，只指定一个事件处理程序，管理某一类型所有事件。 +把一个元素的响应事件（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。 + +## 山月对面经的个人意见 + +仅代表个人意见 + +1. markdown 书写水平需要提高一点点... +2. 垂直水平居中问题，先答 flex 布局，为使用之最广泛的解决方案，再答 grid 布局，体现自己对前沿(不算很前沿)css的了解，再答绝对定位+top+translate。其余可先不答，除非面试官问。 +3. 三列布局中的一个答案还用到了 float，现在写 css 很少用到 float 了，不宜放在第一个回答，回答还是以 flex/grid 为主 + + ## 字幕 可对照字幕与视频进行快速浏览: