此系列为网页设计中经常使用到的垂直居中解决方法，通过本文进行详细地总结。
使用line-height做垂直居中
See the Pen
使用line-height做垂直居中 by whjin (@whjin)
on CodePen.
使用line-height + inline-block做多行文字的垂直居中
See the Pen
使用CSS line-height + inline-block 做多行文字的垂直置中 by whjin (@whjin)
on CodePen.
使用:before + inline-block做垂直居中
See the Pen
使用line-height+inline-block做多行文字的垂直居中 by whjin (@whjin)
on CodePen.
使用padding做垂直居中
See the Pen
使用padding做垂直居中 by whjin (@whjin)
on CodePen.
使用absolute + margin负值做垂直居中
See ...
本地工作区文件恢复1git checkout <filename/dirname>
远程分支删除后，删除本地分支及关联123git branch --unset-upstream <branchname>git branch --unset-upstream feature/test
修改提交时的备注内容123git commit --amendgit log --pretty=online
修改分支名123git branch -m <oldbranch> <newbranch>git branch -m feature/stor-13711 feature/story-13711
撤回提交1234567git reset --soft [<commit-id>/HEAD~n]git reset --soft HEAD~1git reset --mixed HEAD~1git reset --hard HEAD~1
撤销本地分支合并1git revert <commit-id>
恢复误删的本地分支 ...
命名禁止缩写
精简扼要地对class命名，请勿使用自定义缩写。
class name的命名必须是行为、有语意的。
禁止在非特殊情况下写!important
CSS本身有权重设计，任意地使用!important会造成权重混乱而无法维护。
不可轻易限定宽高
用户可以自行设定自己的浏览器，例如Android手机可以设定显示字体大小，写死的高度会让字体相互重叠。
RWD失效
移动设备的高度是无限的，宽度是有限的。
请不要把宽写死。
img请让它自动缩放
请不要替img的容器设定宽或高，让它根据设备自行缩放。
请使用bootstrap的img-responsive。
如果确实要用： 12width: 100%;height: auto;
如果要给img border-radius设定样式，请使用父元素控制行为，保持img只载入图片，没有样式。
优先使用grid排版
请不要花很多时间在写media query，设定一堆breakpoint，自己写组件样式，自己控制每种设备上的容器宽度。
请使用grid system，这些都是已经成熟的框架，而且有些也已经帮你处理了浏览器相容问题。
...
本文总结CSS3中两个用来做动画的属性，一个是transition，另一个是animation。
差异比较
CSS3
差异
transition
在给定的持续时间内平滑地更改属性值（从一个值到另一个值），也就是只需要指定开始与结束的参数，参数改变时就触发动画。
常用语鼠标事件（:hover、active、:focus、:click）或键盘输入时触发
需要事件触发，无法在网页加载时自动发生。一次性，不能重复发生，除非一再触发。
只能定义开始状态和结束状态，不能定义中间状态。
animation
可以自行写动画开始、进行间、结束时各阶段的变化，适合用来做较细微的动画表现。需要明确的指定关键帧（@keyframe）的参数。
网页加载时会直接执行，可以自行控制各阶段动画的变化
animation和transition最大的不同在于transition是当参数改变时触发，而animation则是直接就执行，所有动画效果需要明确的指定关键帧的参数。
CSS3
简写顺序
transition
[property名称][duration ...
pnpm 有什么优势
速度快 节省磁盘空间
pnpm ~/.pnpm-store
建立非扁平化的node_modules .pnpm 软链接
多项目共用一份依赖
前端权限管理的模型
ACL：基于用户的权限管理模型
只需要给当前的用户授权或取消权限
user permission
好处：清晰 简单
缺点：用户量增长，针对每个用户都要维护记录 record 成本高
RBAC：基于角色的权限管理模型
权限跟用户无关 用户-角色-权限
role - permission
user - role
ABAC：基于属性的权限管理模型
可扩展性很高
VSCode配置12345678910111213141516171819202122232425262728293031323334353637383940// .prettierrc.jsmodule.exports = { // 一行最多多少个字符 printWidth: 150, // 指定每个缩进级别的空格数 tabWidth: 2, // 使用制表符而不是空格缩进行 useTabs: tru ...
解决Vue部署 404 问题123456789101112131415server { listent 80 server_name www.example.com location / { index /dist/index.html try_files $uri /index.html }}const router = new VueRouter({ routers:[ { path: '*', component: NotFound } ]})
package.json12345678910111213141516171819202122232425{ "name": "vue-webrtc", "version": "1.0.0", "private": true, "type": "module&qu ...
网络优化配置优化：通过调整构建工具（如Webpack或Vite）的配置，比如代码压缩、Tree Shaking和代码分割，减少打包体积和加载时间。
访问优化：包括图片懒加载、预加载关键资源，以及优化DOM操作，减少渲染阻塞，提升用户体验。
通过减少HTTP请求、启用HTTP/2、使用CDN和缓存策略，提升资源加载速度。
避免巨大的网络负载是Lighthouse的一个审计指标，它指的是前端文件通过网络传输的总大小。
需要实施一个全面的Web性能优化流程：识别特定问题、可视化HTML和CSS文件、压缩和精简代码、减小字体和图片的体积等。
网络负载是指页面从自身服务器或第三方服务器通过互联网下载的所有文件的总和。
优化网络负载需要减少资源的总大小：
移除不必要的资源
找出那些对用户体验没有显著影响的资源，并将它们从页面中移除。
未使用的CSS和JavaScript文件、过大的图片等
减小资源的下载大小
使用压缩工具（如Gzip或Brotli）压缩HTML、CSS和JavaScript文件。
优化图片和字体大小，采用现代格式（如webP和woff2）。
延迟加载资源（Lazy Loa ...
书籍汇总
文墨千秋
点墨人间
泼墨山河
醉墨红尘
染墨浮生
论语
山海经
古文观止
东周列国志
茶经
孟子
周易
诗经
封神演义
黄帝内经
老子
尚书·礼记
楚辞
儒林外史
神农本草经
庄子
世说新语
唐诗三百首
聊斋志异
千金方
鬼谷子
左传
宋词三百首
镜花缘
本草纲目
孙子兵法
史记
元曲三百首
红楼梦
汤头歌
三十六计
三国志
纳兰词
西游记
菜根谭
资治通鉴
人间词话
水浒传
了凡四训
中国通史
三国演义
传习录
