#2022#2021
css3 动画相关
Thu, Dec 23, 2021 5:53 AM

css3 动画相关

animation-timing-function

有如下可选值:

css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);

/* Steps Function keywords */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);

/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: revert;
animation-timing-function: unset;

steps()

Relate to 张鑫旭的 blog

可以用于实现不连续的动画

Relate to stackoverflow

一些 demo 仅供参考 demo1 demo2

一场 position: sticky 无效引发的思考
Wed, Dec 15, 2021 12:42 PM

一场 position: sticky 无效引发的思考

Relate to https://stackoverflow.com/questions/43707076/how-does-the-position-sticky-property-work

一些属性会使 position: sticky 无效

  • You must specify a threshold with at least one of top, right, bottom, or left for sticky positioning to behave as expected
  • 父元素的 display: flex / overflow 属性,等会使其无效

没了 display: flex 还怎么活

使用 float: left 浮动元素
又导致了一个问题 子元素无法把父元素撑开

解决使用 float: left 出现的塌陷

Relate to https://blog.csdn.net/xiaobing_hope/article/details/50296009

在最后一个浮动子元素后面添加一个空的div,并清除其浮动

html
1
2
3
4
5
<div style="float: left" class="div0">
    <div class="div1" style="float: left;"></div>
    <div class="div2" style="float: left;"></div>
    <div style="clear:both;"></div>
</div>

2022-01-06 更新

Relate to https://ishadeed.com/article/position-sticky-css-grid/

align-self: start;

demo: https://codepen.io/shadeed/pen/VwzGpRa
其实之前链接已经有较好的解决方案了 https://stackoverflow.com/a/66966273/12583084, 我却没看到, 并不需要那么多 hack 。

什么是 QPS, TPS, PV, UV, GMV...
Tue, Dec 14, 2021 8:20 AM

什么是 QPS, TPS, PV, UV, GMV...

QPS

Queries Per Second,每秒查询数。每秒能够响应的查询次数。

QPS 是对一个特定的查询服务器在规定时间内所处理流量多少的衡量标准,在因特网上,作为域名系统服务器的机器的性能经常用每秒查询率来衡量。每秒的响应请求数,也即是最大吞吐能力。

TPS

Transactions Per Second 的缩写,每秒处理的事务数目。一个事务是指一个客户机向服务器发送请求然后服务器做出反应的过程。客户机在发送请求时开始计时,收到服务器响应后结束计时,以此来计算使用的时间和完成的事务个数,最终利用这些信息作出的评估分。

TPS 的过程包括:客户端请求服务端、服务端内部处理、服务端返回客户端。

例如,访问一个 Index 页面会请求服务器 3 次,包括一次 html,一次 css,一次 js,那么访问这一个页面就会产生一个 “T”,产生三个 “Q”。

PV

Page View 即页面浏览量,通常是衡量一个网络新闻频道或网站甚至一条网络新闻的主要指标。用户每一次对网站中的每个页面访问均被记录 1 次。用户对同一页面的多次刷新,访问量累计。

根据这个特性,刷网站的 PV 就很好刷了。

与 PV 相关的还有 RV,即重复访问者数量 Repeat Visitors

UV

访问数 Unique Visitor 指独立访客访问数,统计 1 天内访问某站点的用户数 (以 cookie 为依据),一台电脑终端为一个访客。

GMV

Gross Merchandise Volume 的简称。只要是订单,不管消费者是否付款、卖家是否发货、是否退货,都可放进 GMV 。

RPS

代表吞吐率,即 Requests Per Second 的缩写。吞吐率是服务器并发处理能力的量化描述,单位是 reqs/s,指的是某个并发用户数下单位时间内处理的请求数。 某个并发用户数下单位时间内能处理的最大的请求数,称之为最大吞吐率。

关闭页面时怎么向后台发送消息?
Tue, Dec 14, 2021 8:18 AM

关闭页面时怎么向后台发送消息?

使用 navigate api

这个方法主要用于满足统计和诊断代码的需要,这些代码通常尝试在卸载(unload)文档之前向web服务器发送数据。

参数

  • url 表明 data 将要被发送到的网络地址。
  • data 参数是将要发送的 ArrayBufferView 或 Blob 、DOMString 或者 FormData 类型的数据
js
1
navigator.sendBeacon(url, data);

返回值

  • 当用户代理成功把数据加入传输队列时,sendBeacon() 方法将会返回 true,否则返回 false。
不常用的Hooks
Tue, Dec 14, 2021 8:17 AM

不常用的Hooks

useEffect

在渲染结束之后执行

useLayoutEffect

在DOM更新之后执行

useEffect 和 useLayoutEffect 差别

Respect to when-to-use-useimperativehandle-uselayouteffect-and-usedebugvalue useLayoutEffect 在 DOM 更新之后执行。useEffect 在 render 渲染结束后执行。执行示例代码会发现 useLayoutEffect 永远比 useEffect 先执行,这是因为 DOM 更新之后,渲染才结束或者渲染还会结束。

Used in rare cases when you need to calculate the distance between elements after an update or do other post-update calculations / side-effects.

useDebugValue

I feel like the docs do a pretty good example of explaining this one. If you have a custom hook, and you'd like to label it within React DevTools, then this is what you use.

React合成事件和DOM原生事件
Tue, Dec 14, 2021 8:15 AM

React合成事件和DOM原生事件

Respect to React合成事件和DOM原生事件混用须知

SyntheticEvent

jsx
1
2
3
4
5
6
7
8
9
const handleClick = (e) => {
    setState(e.target.value) 
    // 在 react 16 中, 因为事件复用 setState(异步) 时 e 的引用被清空。 
    //react 17 中 no event pooling。 可以直接在异步中使用 event.
} 

<button onClick={handleClick}>
  Activate Lasers
</button>
Linux SWAP 交换分区
Tue, Dec 14, 2021 8:14 AM

Linux SWAP 交换分区

Linux 系统中的 Swap 分区,即交换分区,类似于 Windows 的虚拟内存, 其作用可简单的描述为:当系统的物理内存不够用的时候,将暂时不用的数据存放到交换空间所在的硬盘上,从而可以腾出内存来让别的程序运行。 下面将介绍通过添加 Swap 文件来设置交换分区的方式。

添加swap分区

随便进入一个目录用于后续存放 Swap 文件,也可以直接放在根目录,这里放在 /var 目录下。

shell
1
cd /var

使用 dd 命令生成一个文件块,大小为自己想设置的 Swap 分区大小,这里生成一个名为 swapfile 的文件,大小设为 1G。

shell
1
dd if=/dev/zero of=swapfile bs=1M count=1024

将该文件设为 Swap 文件(格式化)。

shell
1
mkswap swapfile

激活 Swap 文件(启用虚拟内存)。

shell
1
swapon swapfile

检查 Swap 是否正确。

shell
1
swapon -s

另外为了安全建议将交换分区文件权限设为 0600 或 0644 ,执行以下命令。

shell
1
chmod 0600 swapfile

此时已经成功添加了交换分区,可以使用 free 之类的命令查看验证。 但这样重启后 Swap 分区会丢失,需要重新激活才行,所以我们一般在 fstab 文件为其添加开机自动挂载设置。

shell
1
vi /etc/fstab

在最后增加以下内容:

shell
1
/var/swapfile swap swap defaults 0 0

也可以直接执行如下命令来添加:

shell
1
echo "/var/swapfile swap swap defaults 0 0" >> /etc/fstab

删除 Swap 文件

首先将 Swap 文件取消激活:

shell
1
swapoff /var/swapfile

然后删除我们设置的 Swap 文件:

shell
1
rm /var/swapfile

最后再编辑 /fstab 文件删除掉自动挂载 Swap 的设置即可:

shell
1
vi /etc/fstab
How Nginx Decides Which Server Block Will Handle a Request
Tue, Dec 14, 2021 8:11 AM

How Nginx Decides Which Server Block Will Handle a Request

Respect to Understanding Nginx Server and Location Block Selection Algorithms

Parsing the “server_name” Directive to Choose a Match

Next, to further evaluate requests that have equally specific listen directives, Nginx checks the request’s “Host” header. This value holds the domain or IP address that the client was actually trying to reach.

Matching Location Blocks

Similar to the process that Nginx uses to select the server block that will process a request, Nginx also has an established algorithm for deciding which location block within the server to use for handling requests.

Location Block Syntax

Location blocks generally take the following form:

nginx
1
2
3
4
5
location optional_modifier location_match {

    . . .

}

The modifiers below will cause the associated location block to be interpreted as follows:

  • (none) : If no modifiers are present, the location is interpreted as a prefix match. This means that the location given will be matched against the beginning of the request URI to determine a match.
  • = : If an equal sign is used, this block will be considered a match if the request URI exactly matches the location given. = 开头表示精确匹配,只有完全匹配上才能生效
  • ~ : If a tilde modifier is present, this location will be interpreted as a case-sensitive regular expression match. ~ 开头表示区分大小写的正则匹配
  • ~* : If a tilde and asterisk modifier is used, the location block will be interpreted as a case-insensitive regular expression match. ~* 开头表示不区分大小写的正则匹配
  • ^~ : If a carat and tilde modifier is present, and if this block is selected as the best non-regular expression match, regular expression matching will not take place. ^~ 开头对URL路径进行前缀匹配,并且在正则之前。
  • /uri : 不带任何修饰符,也表示前缀匹配,但是在正则匹配之后
  • / : 通用匹配,任何未匹配到其它location的请求都会匹配到,相当于switch中的default

When Does Location Block Evaluation Jump to Other Locations?

Another instance where the processing location may be reevaluated is with the try_files directive. This directive tells Nginx to check for the existence of a named set of files or directories. The last parameter can be a URI that Nginx will make an internal redirect to.

Consider the following configuration:

nginx
1
2
3
4
5
6
7
8
root /var/www/main;
location / {
    try_files $uri $uri.html $uri/ /fallback/index.html;
}

location /fallback {
    root /var/www/another;
}

proxy_pass 反向代理配置中 url 后面加不加 / 的说明

path 后面加 /

nginx
1
2
3
location  /proxy/ {
          proxy_pass http://192.168.1.5:8090/;
}

这样,访问 http://192.168.1.23/proxy/ 就会被代理到 http://192.168.1.5:8090/ 匹配的proxy目录不需要存在根目录 /var/www/html 里面。
注意

nginx
1
2
3
location  /proxy/ {
          proxy_pass http://192.168.1.5:8090;
}

那么访问 http://192.168.1.23/proxy或http://192.168.1.23/proxy/,都会失败!
这样配置后,访问 http://192.168.1.23/proxy/ 就会被反向代理到 http://192.168.1.5:8090/proxy/

nginx
1
2
3
location  /proxy/ {
          proxy_pass http://192.168.1.5:8090/haha/;
}

这样配置的话,访问 http://103.110.186.23/proxy/ 代理到 http://192.168.1.5:8090/haha/

nginx
1
2
3
location  /proxy/ {
          proxy_pass http://192.168.1.5:8090/haha;
}

上面配置后,访问 http://192.168.1.23/proxy/index.html 就会被代理到 http://192.168.1.5:8090/hahaindex.html
同理,访问 http://192.168.1.23/proxy/test.html 就会被代理到 http://192.168.1.5:8090/hahatest.html
注意,这种情况下,不能直接访问 http://192.168.1.23/proxy/ 后面就算是默认的 index.html 文件也要跟上,否则访问失败!

path路径后面不带 /

nginx
1
2
3
location  /proxy {
          proxy_pass http://192.168.1.5:8090/;
}
nginx
1
2
3
location  /proxy {
          proxy_pass http://192.168.1.5:8090;
}

这样配置的话,浏览器访问 http://103.110.186.23/proxy 会自动加上 "/"( 即变成 http://103.110.186.23/proxy/ ),代理到 http://192.168.1.5:8090/proxy/

nginx
1
2
3
location  /proxy {
          proxy_pass http://192.168.1.5:8090/haha/;
}

这样配置的话,浏览器访问 http://103.110.186.23/proxy 会自动加上 "/"( 即变成 http://103.110.186.23/proxy/ ),代理到 http://192.168.1.5:8090/haha/

nginx
1
2
3
location  /proxy {
          proxy_pass http://192.168.1.5:8090/haha;
}

这样配置的话,浏览器访问 http://103.110.186.23/proxy ,和第三种结果一样,同样被代理到 http://192.168.1.5:8090/haha/

What's the difference between event.stopPropagation and event.preventDefault?
Tue, Dec 14, 2021 8:10 AM

What's the difference between event.stopPropagation and event.preventDefault?

  • stopPropagation prevents further propagation of the current event in the capturing and bubbling phases.

  • preventDefault prevents the default action the browser makes on that event.

  • 使用 css pointer-events: none 实现点击穿透

html
1
2
3
4
5
6
7
8
9
 <div class='parent' onclick='alert(`parent`)'>
   <div class='child' onclick='clickChild(event)'>child</div>
 </div>
  <script>
    function clickChild(e) {
      alert('child');
      e.stopPropagation();
    }
  </script>
  • stopImmediatePropagation 如果多个事件监听器被附加到相同元素的相同事件类型上,当此事件触发时,它们会按其被添加的顺序被调用。 如果在其中一个事件监听器中执行 stopImmediatePropagation() ,那么剩下的事件监听器都不会被调用,还会阻止冒泡。
HTTP STATUS
Tue, Dec 14, 2021 8:03 AM

HTTP STATUS

30x

  • 301 redirect 变成 GET请求, Moved Permanently
  • 302 redirect 变成 GET请求, Temporary Redirect
  • 303 redirect 变成 GET请求, 被 302 包含
  • 307 redirect request method 不变, Temporary Redirect
  • 308 redirect request method 不变, Permanent Redirect
Numerical representation in computer
Tue, Dec 14, 2021 8:02 AM

Numerical representation in computer

Respect to On the Primitive Code, Inverse Code, Complement Code and Shift Code of Operating System and 原码, 反码, 补码 详解(博客园) and 原码、反码、补码及位操作符,C语言位操作详解

Binary machine code

Any data exists in the form of binary machine code in a computer. The first number is used to represent the positive and negative values: 0 is positive and 1 is negative.

in the form of: 以...形式

Numerical representation in computer

  • Original Code 原码
  • Inverse Code 反码
  • Complement Code 补码
  • Frameshift 移码 (是一种操作,非数值表示法 移码是为了不同的特定目的而存在的,手段是移动部分或全部数位。例如上面有人提到的浮点数表示法使用的阶码,阶码是用补码表示的,但由于补码存在符号位,不利于比较,就把负数部分整个往上移动,使得最小的数是0,这样一来比较阶码的时候就不需要考虑符号位了。另一个常见的例子是补码,通过移位把反码的负0变成最小的负数。)

Original Code

The value represented by machine code is called the original code.

Inverse Code

Inverse code is generally the least useful representation of computer.
The inverse code of positive numbers is the original code itself. The inverse code of negative numbers: the number of the sign bits is the first bit remains unchanged (符号位保持不变), and the rest of the bits are reversed.
For example, if the original code of + 2 is 00000010, then the inverse code of + 2 is 00000010. The original code of – 2 is 10000010, and the inverse code is 1111101.

Complement Code

Complement is one of the most frequently used encoding methods in computer numerical operations.
The positive complement is the original code itself, which is the same as the inverse code. The complement of negative number is the result of it's inverse code + 1. For example, the complement of + 2 is 00000010. The complement of – 2: 11111111101 (counter code) +1 = 11111111110.

Frameshift

Shift code is to add a bias constant to the value. When the number of coding bits is n, it usually shifts to the N-1 power of 2. For example, the shift code of – 2 = the 7th power of the original code + 2 = 00000010 + 10000000 = 10000010, which can be used as the complement of – 2 11111110
Sign bits remain unchanged and the remaining bits are reversed + 1

Why are there complements and countercodes?

首先, 因为人脑可以知道第一位是符号位, 在计算的时候我们会根据符号位, 选择对真值区域的加减. (真值的概念在本文最开头). 但是对于计算机, 加减乘数已经是最基础的运算, 要设计的尽量简单. 计算机辨别"符号位"显然会让计算机的基础电路设计变得十分复杂! 于是人们想出了将符号位也参与运算的方法. 我们知道, 根据运算法则减去一个正数等于加上一个负数, 即: 1-1 = 1 + (-1) = 0 , 所以机器可以只有加法而没有减法, 这样计算机运算的设计就更简单了.
于是人们开始探索 将符号位参与运算, 并且只保留加法的方法. 首先来看原码:

计算十进制的表达式: 1-1=0

1 - 1 = 1 + (-1) = [00000001]原 + [10000001]原 = [10000010]原 = -2

如果用原码表示, 让符号位也参与计算, 显然对于减法来说, 结果是不正确的.这也就是为何计算机内部不使用原码表示一个数.

为了解决原码做减法的问题, 出现了反码:

计算十进制的表达式: 1-1=0

1 - 1 = 1 + (-1) = [0000 0001]原 + [1000 0001]原= [0000 0001]反 + [1111 1110]反 = [1111 1111]反 = [1000 0000]原 = -0

发现用反码计算减法, 结果的真值部分是正确的. 而唯一的问题其实就出现在"0"这个特殊的数值上. 虽然人们理解上+0和-0是一样的, 但是0带符号是没有任何意义的. 而且会有[0000 0000]原和[1000 0000]原两个编码表示0.

于是补码的出现, 解决了0的符号以及两个编码的问题:

1-1 = 1 + (-1) = [0000 0001]原 + [1000 0001]原 = [0000 0001]补 + [1111 1111]补 = [0000 0000]补=[0000 0000]原

这样0用[0000 0000]表示, 而以前出现问题的-0则不存在了.而且可以用[1000 0000]表示-128:

(-1) + (-127) = [1000 0001]原 + [1111 1111]原 = [1111 1111]补 + [1000 0001]补 = [1000 0000]补

-1-127的结果应该是-128, 在用补码运算的结果中, [1000 0000]补 就是-128. 但是注意因为实际上是使用以前的-0的补码来表示-128, 所以-128并没有原码和反码表示.(对-128的补码表示[1000 0000]补算出来的原码是[0000 0000]原, 这是不正确的)

使用补码, 不仅仅修复了0的符号以及存在两个编码的问题, 而且还能够多表示一个最低数. 这就是为什么8位二进制, 使用原码或反码表示的范围为[-127, +127], 而使用补码表示的范围为[-128, 127].

因为机器使用补码, 所以对于编程中常用到的32位int类型, 可以表示范围是: [-2^31, 2^31-1] 因为第一位表示的是符号位.而使用补码表示时又可以多保存一个最小值.

位运算

因为位运算的操作值要求是整数,其结果也是整数,所以经过位运算的都会自动变成整数 在JavaScript中可以通过两次取反 ~~去除小数部分,~~1.1 === 1, ~~(-.1.1) === 1

运算符功 能运算规则
&按位与对应位均为 1 时,结果才为 1
|按位或两位中只要有一位为 1,结果为 1。只有两位同时为 0 时,结果为才为 0。
^按位异或两位相异时,结果为 1;两位相同时,结果为 0。
<<左移将运算数的各二进制位均左移若干位,高位丢弃(不包括 1),低位补 0,每左移一位,相当于该数乘以 2。
>>右移将运算数的各二进制位均右移若干位,正数补左补 0,负数左补 1,右边移出的位丢弃。
~按位取反0 变 1,1 变 0。

二进制 十六进制表示法

十进制二进制十六进制
00b00x00
10b10x01
20b100x02
30b110x03
Markdown syntax guide
Tue, Dec 14, 2021 5:32 AM

Markdown syntax guide

Headers

This is a Heading h1

This is a Heading h2

This is a Heading h3

This is a Heading h4 最多只能到 h4

很长很长很长很长很长很长很长很长很长很长很长很长很长很长的H2

很长很长很长很长很长很长很长很长很长很长很长很长很长很长的H3

Emphasis

This text will be italic

This will also be italic

This text will be bold.

This will also be bold

You can combine them

delete item

Lists

Unordered

  • Item 1
  • Item 2
  • Item 2a
  • Item 2b

Ordered

  1. Item 1
  2. Item 2
  3. Item 3

Checked List

  • 你好
  • 我们

Images

This is a alt text.

Links

You may be using admin manage page.

Blockquotes

Markdown is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz.

Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.

Tables

Left columnsRight columnsCenter columns
left fooright foocenter foo
left barright barcenter foo
left bazright bazcenter foo

Blocks of code

js
1
2
let message = 'Hello world';
alert(message);

Inline code

This web site is using markedjs/marked.

Use acme.sh to get certificate
Mon, Dec 13, 2021 3:10 PM

Use acme.sh to get certificate

Install from web

shell
1
curl https://get.acme.sh | sh

Example for Tencent Cloud (DNSPod)

  1. click to generate secret key
  2. use this script to get cert
shell
1
2
3
4
export DP_Id="1234" // get from https://console.dnspod.cn/account/token
export DP_Key="sADDsdasdgdsf"
acme.sh --issue --dns dns_dp -d example.com \n 
 -d *.example.com --renew-hook "command to reload your web server"

一些相关的小事情

  • acme.sh 默认 CA 切换到 ZoreSSL
    改回到 Let's Encrypt
shell
1
acme.sh --set-default-ca --server letsencrypt
  • 有时候 corncob 会失败
shell
1
acme.sh --cron --home ~/.acme.sh

查看日志, 类似如下内容。

shell
1
2
3
4
5
6
[2021年 12月 14日 星期二 10:56:23 CST] ===Starting cron===
[2021年 12月 14日 星期二 10:56:23 CST] Renew: 'powerfulyang.com'
[2021年 12月 14日 星期二 10:56:23 CST] Skip, Next renewal time is: 2021年 12月 24日 星期五 10:23:57 UTC
[2021年 12月 14日 星期二 10:56:23 CST] Add '--force' to force to renew.
[2021年 12月 14日 星期二 10:56:23 CST] Skipped powerfulyang.com
[2021年 12月 14日 星期二 10:56:23 CST] ===End cron===
安装oh my zsh
Fri, Oct 29, 2021 11:35 AM

安装oh my zsh

官网 https://ohmyz.sh/

Install oh-my-zsh

shell
1
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Mac 安装 FiraCode 字体并修改 Iterm 字体

  • 从 github 下载 git clone https://github.com/tonsky/FiraCode.git
  • 进入 /distr/ttf 目录全选字体 右键 open with font book
  • 可以顺便修改 Iterm 的字体为 FiraCode

换一个好看的 Iterm 配色

下载 Solarized Dark Patched 保存为itermcolors后缀

换一个好看的 oh-my-zsh 主题

vim ~/.zshrc 修改 ZSH_THEME 为 ZSH_THEME="agnoster"

Install useful plugins

click plugins to see.
vim ~/.zshrc 修改 plugins 为 plugins=(git zsh-autosuggestions zsh-syntax-highlighting sudo)

安装 zsh-syntax-highlighting

shell
1
2
3
4
5
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git

echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

安装 zsh-autosuggestions

shell
1
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
Git: How do I force "git pull" to overwrite local files?
Fri, Oct 29, 2021 9:37 AM

Git: How do I force "git pull" to overwrite local files?

How to overwrite

First, run a fetch to update all origin/<branch> refs to latest:

git fetch --all
Backup your current branch:

git branch backup-master
Then, you have two options:

git reset --hard origin/master
OR If you are on some other branch:

git reset --hard origin/<branch_name>

Explanation

git fetch downloads the latest from remote without trying to merge or rebase anything.

Then the git reset resets the master branch to what you just fetched. The --hard option changes all the files in your working tree to match the files in origin/master

vertical-align
Sat, Oct 9, 2021 3:30 AM

vertical-align

https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Values for inline elements

Parent-relative values

These values vertically align the element relative to its parent element:

  • baseline
    Aligns the baseline of the element with the baseline of its parent. The baseline of some replaced elements, like <textarea>, is not specified by the HTML specification, meaning that their behavior with this keyword may vary between browsers.

  • sub
    Aligns the baseline of the element with the subscript-baseline of its parent.

  • super
    Aligns the baseline of the element with the superscript-baseline of its parent.

  • text-top
    Aligns the top of the element with the top of the parent element's font.

  • text-bottom
    Aligns the bottom of the element with the bottom of the parent element's font.

  • middle
    Aligns the middle of the element with the baseline plus half the x-height of the parent.

  • <length>
    Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.

  • <percentage>
    Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property. A negative value is allowed.

Line-relative values

The following values vertically align the element relative to the entire line:

  • top
    Aligns the top of the element and its descendants with the top of the entire line.

  • bottom
    Aligns the bottom of the element and its descendants with the bottom of the entire line.

For elements that do not have a baseline, the bottom margin edge is used instead.

Values for table cells

  • baseline (and sub, super, text-top, text-bottom, <length>, and <percentage>)
    Aligns the baseline of the cell with the baseline of all other cells in the row that are baseline-aligned.

  • top
    Aligns the top padding edge of the cell with the top of the row.

  • middle
    Centers the padding box of the cell within the row.

  • bottom
    Aligns the bottom padding edge of the cell with the bottom of the row.

Negative values are allowed.

2022-02-25 补充

我终于懂了
The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.
原来是给 行内元素 在行内用的。 块级的就 flex 一把梭