是不是在日常开发中经常遇到实现网格的需求，网格通常对网页中展示的元素能起到很好的定位和对齐作用。
这里介绍如何只通过 CSS 来实现这个需求？
对未来的担忧，对历史的悔恨，在探索人生的意义上陷入停滞
发布日期：2021-05-03 18:20
泰勒最新专辑Folklore中的一曲The Last Great American Dynasty继承了她一贯出色的叙事。二十几年的创作经验下，她的文风愈渐成熟，主题愈得延伸。
我搞了一个自己的域名：buckethead.top，鼓捣了阵子，确实是有点用呢
css 优先级权重计算
权重值
W3C 早已固定,级别最低的为 0，选择器权重: !important(10000)>行内(1000)>id(100)>类(10)>标签(1)>通配符(0)
以上的权重数值，是 W3C 方便 developer 记忆权重大小关系，给定的一个虚拟值，不是固定的。这里 1000，实际就是四位，也可以按照 1,0,0,0 来理解。
- 第一等级代表：内联样式，style=””，权值为 1000
- 第二等级代表：ID 选择器，如#id 名，权值为 100
- 第三等级代表：class 类、伪类选择器和属性选择器，如.class 类名，:hover，a[target=”_blank”]，权值都为 10
- 第四等级代表：标签选择器、伪元素选择器，如 div，::after，权值都为 1
计算权重大小练习
div ul li {....}------> 0,0,0,3，分析：1+1+1=3
.nav ul li {....} ------> 0,0,1,2，分析：10+1+1=12
a:hover {....} -------> 0,0,1,1，分析：1+10=11，标签选择器a，伪类选择器:hover权重为10，与class类选择器相同
.nav a {....} ------> 0,0,1,1，分析：10+1=11注意：数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0,1,0， 所以不会存在 10 个 div 能赶上一个类选择器的情况（对应最后一个特殊案例 5，在特殊案例 5 中进行演示讲解）
案例
下面的代码运行后，颜色显示为 red 还是 green？
<style>
/* 1+1+1+1+1+1+1+1+1+1+1+1=12 */
div>div>div>div>div>div>div>div>div>div>div>p{
color: red;
}
/* 10 */
.p1{
color:green
}
</style>
/* 显示绿色，为什么*/
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<p class="p1">我是div里面的p</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>错误理解
根据前面的分析，权重分别为 1+1+1+1+1+1+1+1+1+1+1+1=12，10，权重比较 12>10，都是颜色样式，故显示为 red 颜色。
正确理解
1 在下面的代码，运行后发现显示 green 绿色，为什么，这里涉及到多层嵌套时，权重的比较方法
总结
- 无论嵌套多少层同级别的标签（div>div>div>div>div>div>div>div>div>div>div>p{……….}），都没有一个类的权重值大；
- 无论嵌套多少层相同级别的类，都没有一个 id 的权重值大。
- id(100)>类(10)>标签(1)，以上这个值都是虚拟值;
正确理解 2
值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。0,0,0,12 与 0,0,1,0 的比较，所以最终显示为 green 绿色。
总结
再举个例子：数位之间没有进制，比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0,1,0， 所以不会存在 10 个 div 能赶上一个类选择器的情况。
太困了，连续几天接近1点睡觉，中途还有起来换尿布。
最近精气神不是很理想，面对生活的种种，对未来感到迷茫
今天诺安大涨 4.78% ！！，多久没这么涨了啊，可把我跌惨了。。。
lerna 用法
Lerna是一个工具，它优化了使用git和npm管理多包存储库的工作流。
概览
工作的两种模式
Fixed/Locked mode (default)
vue,babel都是用这种，在publish的时候,会在lerna.json文件里面”version”: “0.1.5”,,依据这个号，进行增加，只选择一次，其他有改动的包自动更新版本号。
Independent mode
lerna init –independent初始化项目。
lerna.json文件里面”version”: “independent”,
每次publish时，您都将得到一个提示符，提示每个已更改的包，以指定是补丁、次要更改、主要更改还是自定义更改。
初始化
$ npm install lerna -g
$ mkdir lerna-gp && cd $_
$ lerna init # 用的默认的固定模式，vue-cli babel等都是这个项目结构
➜ lerna-gp git:(master) ✗ tree
.
├── lerna.json
├── package.json
└── packages
├── daybyday
│ └── package.json
├── gpnode
│ └── package.json
└── gpwebpack
└── package.json
4 directories, 5 files
配置文件
- package.json
- lerna.json
# package.json 文件加入
"private": true, // 私有模式不发布
"workspaces": [
"packages/*" // 自定义包路径
],
# lerna.json 文件加入
"useWorkspaces": true, // 使用自定义包路径
"npmClient": "yarn", // 修改包管理工具
命令
lerna create < name > [loc]
创建一个包，name包名，loc 位置可选
# 根目录的package.json
"workspaces": [
"packages/*",
"packages/@gp0320/*"
],
# 创建一个包gpnote默认放在 workspaces[0]所指位置
lerna create gpnote
# 创建一个包gpnote指定放在 packages/@gp0320文件夹下，注意必须在workspaces先写入packages/@gp0320，看上面
lerna create gpnote packages/@gp0320
lerna add [@version] [–dev] [–exact]
增加本地或者远程package做为当前项目packages里面的依赖
# Adds the module-1 package to the packages in the 'prefix-' prefixed folders
lerna add module-1 packages/prefix-*
# Install module-1 to module-2
lerna add module-1 --scope=module-2
# Install module-1 to module-2 in devDependencies
lerna add module-1 --scope=module-2 --dev
# Install module-1 in all modules except module-1
lerna add module-1
# Install babel-core in all modules
lerna add babel-core
lerna bootstrap
默认是npm i,因为我们指定过yarn，so,run yarn install,会把所有包的依赖安装到根node_modules.
lerna list
列出所有的包，如果与你文夹里面的不符，进入那个包运行yarn init -y解决。
lerna import < path >
lerna run < script > – [..args]
运行依赖包里面的有这个script的命令
lerna run --scope my-component testlerna link
项目包建立软链，类似npm link
lerna clean
删除所有包的node_modules目录
lerna changed
列出下次发版lerna publish 要更新的包。
原理： 需要先git add,git commit 提交。 然后内部会运行git diff –name-only v版本号，搜集改动的包，就是下次要发布的。并不是网上人说的所有包都是同一个版全发布。
➜ lerna-repo git:(master) ✗ lerna changed
info cli using local version of lerna
lerna notice cli v3.14.1
lerna info Looking for changed packages since v0.1.4
daybyday #只改过这一个 那下次publish将只上传这一个
lerna success found 1 package ready to publish
lerna publish
会打tag，上传git,上传npm。 如果你的包名是带scope的例如：”name”: “@gp0320/gpwebpack”, 那需要在packages.json添加
"publishConfig": {
"access": "public"
},lerna exec – < command > [..args]
运行任意命令在每个包
lerna exec -- rm -rf ./node_modules
lerna exec --scope my-component -- ls -la