我个人在2022年10，11月份的笔记的笔记，不定期更新

一、CSS的世界阅读笔记

1.1 重温CSS关系选择器

关系选择器是指根据与其他元素的关系选择元素的选择器，常见的符号有空格、>、~，还有+等，这些都是非常常用的选择器。

后代选择器：选择所有合乎规则的后代元素。空格连接。
相邻后代选择器：仅仅选择合乎规则的儿子元素，孙子、重孙元素忽略，因此又称“子选择器”。>连接。
兄弟选择器：选择当前元素后面的所有合乎规则的兄弟元素。~连接。
相邻兄弟选择器：仅仅选择当前元素相邻的那个合乎规则的兄弟元素。+连接。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .container > div{
                line-height: 12px;
            }
            .container  div{ /*所有后代均生效*/
                font-weight: 120;
            }
            h3~p{  /*所有兄第均生效*/
                font-size: 20px;
            }
            h3+p{  /*只有相邻的兄弟生效*/
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="child">
                child
                <div class="grandson">grandson</div>
            </div>
        </div>

        <h3>这是标题</h3>
        <p>这是段落</p>
        <p>这是段落</p>
        <p>这是段落</p>
        <p>这是段落</p> 
        <p>这是段落</p>
    </body>
    <script></script>
</html>

1.2 对于行内块元素具有以下特点：

包裹性，即不论里面内容再多，只要是正常文本，宽度也不会超过容器。

通过以上特性，我们可以实现文字较少时居中对齐，较多时居左对齐

<style>
.box {
  padding: 10px;
  background-color: #cd0000;
  text-align: center;
}
.content {
  display: inline-block;
  text-align: left;
}
</style>

<div class="box">
  <p id="conMore" class="content">文字内容</p>
</div>

1.3 超越!important，超越最大

权重方面：max-width > width !important
当前min-width的值大于max-width时，min-width会覆盖max-width。

1.4 一些名词的解释

未定义行为undefined behavior 在css中的表现我们俗称之为：浏览器兼容问题。

内部盒子与外部盒子首先来看下display:inline-block; 这个属性是怎么构成的我们可以把它想象成是有两个盒子组成，外面的盒子叫行内盒子，里面的盒子叫块级盒子。

流动性和流动性丢失

1、创建一个块级元素，就像你在一个容器里面加水一样，水具有流动性，会自动平铺开。
2、当你给这个元素设置了宽度，这个流动性就丢失了。宽度限制死了，不会自动平铺开。

二、全局安装的第三方依赖无法识别

warn

解决方式是把以下四个环境变量添加Path下

%NODE_PATH%\

%NODE_PATH%\node_cache

%NODE_PATH%\node_global

%NODE_PATH%\node_modules

三、如何自定义检查node或npm的版本

/* eslint-disable */
var chalk = require('chalk')
var semver = require('semver')
var packageConfig = require('../package.json')
var shell = require('shelljs')
function exec (cmd) {
  return require('child_process').execSync(cmd).toString().trim()
}

var versionRequirements = [
  {
    name: 'node',
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  },
]

if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  })
}

module.exports = function () {
  var warnings = []
  for (var i = 0; i < versionRequirements.length; i++) {
    var mod = versionRequirements[i]
    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ': ' +
        chalk.red(mod.currentVersion) + ' should be ' +
        chalk.green(mod.versionRequirement)
      )
    }
  }

  if (warnings.length) {
    console.log('')
    console.log(chalk.yellow('To use this template, you must update following to modules:'))
    console.log()
    for (var i = 0; i < warnings.length; i++) {
      var warning = warnings[i]
      console.log('  ' + warning)
    }
    console.log()
    process.exit(1)
  }
}

四、nginx托管静态资源示例

server {
    listen  443 ssl;
    listen 8888;
    charset UTF-8;
    server_name _;
    #server_name 10.203.8.241,esign.zju.edu.cn,localhost;
    etag  on;
    add_header X-Frame-Options SAMEORIGIN;
	
    ssl_certificate /etc/nginx/cert/_.zju.edu.cn.crt;

    ssl_certificate_key /etc/nginx/cert/_.zju.edu.cn.key;


    location ^~ /esignpro-web {
       proxy_pass http://127.0.0.1:8082/esignpro-web;
    }

    location ^~ /esign-web/oauth {
       proxy_pass http://127.0.0.1:8082/esignpro-web/oauth;
    }

    location /doc-web {
        alias /root/tsign/apps/server/web/doc-web;
        try_files $uri $uri/ @docwebrewrites;
        autoindex off;
    }
  

    location @docwebrewrites {
        rewrite ^(.+)$ /doc-web/index.html last;
    }


    location /esign-h5 {
      alias /root/tsign/apps/server/web/esignpro-open-sign-web-h5;
      index  index.html index.htm;
      try_files $uri $uri/ @esignh5rewrites;
      autoindex off;
    }

    location @esignh5rewrites {
      rewrite ^(.+)$ /esign-h5/index.html last;
    }


    error_page  404              /404.html;

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
    location / {
        root /root/tsign/apps/server/web/document_verify;
        try_files $uri $uri/ @docindexrewrites;
        autoindex off;
    }

   location @docindexrewrites {
      rewrite ^(.+)$ /document_verify/index.html last;
    }

    # 签署页面请求8020转发
    location /esign/ {
      proxy_pass              http://127.0.0.1:8020/esign/;
      proxy_redirect          off;
      proxy_set_header        X-Real-IP       $remote_addr;
      proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
      client_max_body_size   100m;
    }
 
}

五、更新远程最新分支到本地

解决办法：git fetch origin –prune 更新一下分支信息，然后再git branch -a就能看到新的分支了~ 此方法会同步已经删除的分支

六、nvm use 命令失效

warn

当你碰到这个问题的时候，你一定是想切换一下管理员身份就好了，但是我就是管理员身份他还报错。这怎么搞？

原因是nvm无法识别node 的安装路径，解决方案如下：

在nvm下新建nodejs文件夹
打开setting.txt 将 C:\Program Files\nodejs 改为 C:\Users\admin\AppData\Roaming\nodejs
使用nvm off / nvm on 重启配置

setting.txt文件内容如下：

root: C:\Users\admin\AppData\Roaming\nvm
path: C:\Users\admin\AppData\Roaming\nodejs
node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

七、5分钟带你看懂 prettier + eslint 搭配（vscode）

warn warn

参考链接：

参考链接

2022年10，11月份的笔记