update image path

fangyan · fangyan · commit 8ce714a3f4bd · 2022-05-17T08:05:22.000+08:00
diff --git a/chapters/001 盒模型.md b/chapters/001 盒模型.md
@@ -21,7 +21,7 @@
 
 盒模型由图中几个区域组成，每个区域都有不同的作用。
 
-![盒模型](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/91.jpg)
+![盒模型](https://pengfeiw.github.io/images/blog/91.jpg)
 
 *盒模型组成：Margin box(外边距)、Border box(边框)、Padding box(内边距)、Content box(内容)*
 
@@ -32,7 +32,7 @@
 
 在谷歌浏览器中，点击F12打开开发者工具，选中一个元素，可以在下方样式看到该元素的盒子各区域尺寸详情。
 
-![盒模型](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/92.jpg)
+![盒模型](https://pengfeiw.github.io/images/blog/92.jpg)
 
 通常，浏览器会给我们的html页面设置一个默认样式（user agent style）。例如，一个段落`p`的`display`为`block`，而`span`的`display`为`inline`，这些都是默认的样式。我们可以通过设置css来覆盖这些默认样式。
 
diff --git a/chapters/004 特征性.md b/chapters/004 特征性.md
@@ -136,7 +136,7 @@ a.my-class.another-class[href]:hover {
 
 至此你应该知道了如何去计算一个选择性的权重（分数）。如何去写一个规则覆盖另一个规则。下面的示意图很好的总结了各类型选择器的权重（分数）。
 
-![css选择器权重](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/93.jpg)
+![css选择器权重](https://pengfeiw.github.io/images/blog/93.jpg)
 
 最左侧是id选择器，中间是类选择器、属性选择器和伪类选择器，最后面是元素选择器和伪元素选择器。
 
diff --git a/chapters/005 继承.md b/chapters/005 继承.md
@@ -57,7 +57,7 @@ html页面中每个css属性都有一个预定义的默认值。如果级联算
 
 其中有一些属性是可以继承的，例如上面列举的那些属性。如果有一个元素有父元素，并且父元素定义了某个可继承css属性的值，那么这个元素的对应的属性值将会从其父节点元素继承，如果该元素自己也定义了该css属性的值，那个这个值会覆盖从父节点继承的属性值。我们可以在谷歌浏览器中，按F12打开开发者工具在样式面板中，从computed页面看到各个属性的计算详情。
 
-![css继承](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/94.jpg)
+![css继承](https://pengfeiw.github.io/images/blog/94.jpg)
 
 ## 四. 显式控制继承
 
diff --git a/chapters/006 颜色.md b/chapters/006 颜色.md
@@ -69,7 +69,7 @@ h1 {
 ```
 HSL表示色彩、饱和度、亮度。Hue描述了色轮上的颜色值，从0度到360度，0度表示红色（360度也是红色），180度或者50%表示蓝色。
 
-![css color](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/95.jpg)
+![css color](https://pengfeiw.github.io/images/blog/95.jpg)
 
 Saturation表示所选颜色的亮度。饱和度为0%，将显示为灰色。lightness表述的是光照强度，你可以想像一个红色的物体在不同光照强度下表现的颜色，当lightness为100%，最终显示为白色，当lightness为0%,最终显示为黑色。注意Saturation和lightness参数必须传百分比数值。这个lightness其实就是图形学中的[颜色反射定律](https://pengfeixc.com/blogs/computer-graphics/color-and-feng-illumination-model)。
 
diff --git a/chapters/007 尺寸单位.md b/chapters/007 尺寸单位.md
@@ -113,7 +113,7 @@ css提供了一些相对于元素字体大小的相对单位。
 | ic   | "水"字形                                                     |
 | rlh  | 根节点行高                                                   |
 
-![css尺寸单位](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/96.jpg)
+![css尺寸单位](https://pengfeiw.github.io/images/blog/96.jpg)
 
 #### 视口相对单位
 
diff --git a/chapters/008 布局.md b/chapters/008 布局.md
@@ -17,7 +17,7 @@ CSS为我们提供了多种布局方式，有水平轴布局，垂直轴布局
 ```
 inline元素被称为行内元素，行内元素就像一段语句中的一个单词。它们在行内方向上紧挨着彼此。像`<span>`和`<strong>`元素就是典型的行内元素，它们在`<p>`（段落，`<p>`是一个block元素，后面将会介绍block元素）中都是紧挨着彼此的。它们同样拥有周围的空间，即`padding`、`border`和`margin`属性都是有效的。
 
-![css布局](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/120.jpg)
+![css布局](https://pengfeiw.github.io/images/blog/120.jpg)
 
 你无法设置行内元素的`width`和`height`属性。block层级的margin和padding将会被周围的元素忽略（这句话的英文原文是*Any block level margin and padding will be ignored by the surrounding elements*，我不清楚这样翻译是否合适）。
 
diff --git a/chapters/011 逻辑属性.md b/chapters/011 逻辑属性.md
@@ -7,12 +7,12 @@
 **块流（Block flow）**指的是块排列的方向。例如有两个段落，块流动的方向就是从第一个块到第二个块。在英文文档中，块流动方向是从上到下。
 
 下一个段落在上一个段落的下方。
-![CSS Block FLow](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/122.jpg)
+![CSS Block FLow](https://pengfeiw.github.io/images/blog/122.jpg)
 
 ## 二.内联流（Inline flow）
 
 **内联流**的方向就是一行文本的书写方向（页面渲染一行文字的方向）。在英文文档中内内联流的方向是从左至右。如果你将网页页面语言更改为*Arabic*（`<html lang="ar">`），内联流方向将变为从右至左。
-![CSS Inline Flow](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/123.jpg)
+![CSS Inline Flow](https://pengfeiw.github.io/images/blog/123.jpg)
 
 文本流动的方向由页面的**书写模式**决定。我们可以通过更改`writing-mode`来更改文字的流动方向。`writing-mode`可以设置以下几种值：
 - `horizontal-tb`：文本流的方向是水平方向的（从左至右），元素是从上往下（tb：top-bottom）堆叠。
@@ -49,7 +49,7 @@
 >
 >此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
 
-![css float direction](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/120.jpg)
+![css float direction](https://pengfeiw.github.io/images/blog/120.jpg)
 
 ## 四.尺寸
 
diff --git a/chapters/012 间距.md b/chapters/012 间距.md
@@ -4,7 +4,7 @@
 
 first，假设有三个box，从上往下堆叠在一起。现在你想在它们之前添加一个间距，你有几种方式处理这个问题呢？
 
-![css spacing](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/124.jpg)
+![css spacing](https://pengfeiw.github.io/images/blog/124.jpg)
 
 `margin`属性也许正好能满足你现在的要求，但是它可能会添加了额外的边距，超出了你的预期。例如，你如何调整边距正好处在这些元素的之间？可能`gap`属性更适合这种情况。调整元素的间距有很多方式，每种方式都有它们的优点和使用场景。
 
@@ -29,7 +29,7 @@ HTML还提供了一些HTML实体（HTML entities），它们是保留的字符
 
 如果你想在元素box外侧添加一个边距，可以使用`margin`属性。`margin`属性是`margin-top`、`margin-right`、`margin-bottom`和`margin-left`的简写。
 
-![box model](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/125.jpg)
+![box model](https://pengfeiw.github.io/images/blog/125.jpg)
 
 以下两种方式等价：
 ```css
@@ -109,7 +109,7 @@ margin-left: 4px;
 
 `padding`与`margin`相似，但是它是在盒子内部创建一个边距，称之为内边距。
 
-![css padding](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/126.jpg)
+![css padding](https://pengfeiw.github.io/images/blog/126.jpg)
 
 如果元素设置了`padding`，那么在不同`box-sizing`属性值时，元素的尺寸也不同。
 <iframe height="300" style="width: 100%;" scrolling="no" title="012 Spacing_07" src="https://codepen.io/AhCola/embed/PomvJMG?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
@@ -154,7 +154,7 @@ margin-left: 4px;
 
 在[Grid](http://pengfeixc.com/tutorial/css/grid)和[Flex](http://pengfeixc.com/tutorial/css/flex)中，可以使用`gap`属性，在元素中间添加一个间距。
 
-![Grid和Flex](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/127.jpg)
+![Grid和Flex](https://pengfeiw.github.io/images/blog/127.jpg)
 
 ## 六.间距一致
 
diff --git a/chapters/013 伪元素.md b/chapters/013 伪元素.md
@@ -3,7 +3,7 @@
 *伪元素的作用是在不添加任何html代码的情况下可以拥有添加额外的元素的功能，或者是指定某个目标元素。你可以在本节学习伪元素的相关知识。*
 
 如果你的上司安排给你一个任务，将一篇文章的每个段落的首字母变大，你将如何实现这个功能呢？
-![css伪元素](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/128.jpg)
+![css伪元素](https://pengfeiw.github.io/images/blog/128.jpg)
 
 幸运的是，css恰好提供了这个功能。你可以使用`::first-letter`实现这个需求。
 ```css
diff --git a/chapters/015 边框.md b/chapters/015 边框.md
@@ -193,7 +193,7 @@ css还支持用图片设置边框。`border-image`属性允许用户设置图片
 	border-image-slice: 61 58 51 48;
 }
 ```
-![border-image-slice](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/129.jpg)
+![border-image-slice](https://pengfeiw.github.io/images/blog/129.jpg)
 
 经过四条分割线，图片被分成9个区域：四个角（左上、右上、右下和左下）、四边（上、右、下、左）和中间区域。四个角区域用于渲染元素盒子的四个角，四边区域用于渲染元素的边缘。`border-image-repeat`定义了它们是如何填充各自负责的空间的。`border-image-width`定义了边框的宽度。
 
diff --git a/chapters/018 z-index和栈空间.md b/chapters/018 z-index和栈空间.md
@@ -32,7 +32,7 @@ MDN中还提到了下面两点内容，作为补充。
 
 每个元素box都属于一个栈空间，这些元素box在栈空间内都有一个整数的**栈层级**，元素的**栈层级**可以用`z-index`，默认**栈层级**为0，同一个栈空间内，栈层级大的元素永远在栈层级小的元素的前面，栈层级大表示其z坐标大，越靠近屏幕外面，离人眼越近，所以一般我们可以通过设置`z-index`使某个元素显示在其他元素的上面。
 
-![stacking context](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/130.jpg)
+![stacking context](https://pengfeiw.github.io/images/blog/130.jpg)
 
 ### 栈空间的创建
 
diff --git a/chapters/020 渐变.md b/chapters/020 渐变.md
@@ -4,7 +4,7 @@
 
 假设公司的UI递过来一份web设计稿让你完成。主页面的header是一段文字和一个按钮，背景是一个渐变色的背景图，你如何去完成这个header呢？
 
-![css渐变](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/134.jpg)
+![css渐变](https://pengfeiw.github.io/images/blog/134.jpg)
 
 如果你没有用过css渐变，你可能会想到用图片处理软件创建一个背景图，然后使用`background`属性设置header的背景图片来完成任务。但是css提供了`linear-gradient`，可以很方便的解决这个问题。
 <iframe height="300" style="width: 100%;" scrolling="no" title="020 Gradient_01" src="https://codepen.io/AhCola/embed/MWowwBd?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
diff --git a/chapters/021 动画.md b/chapters/021 动画.md
@@ -16,11 +16,11 @@
 
 整个动画在两种状态间变化，每轮变化时间为1秒。
 
-![css动画](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/135.jpg)
+![css动画](https://pengfeiw.github.io/images/blog/135.jpg)
 
 这个动画有两个关键控制点：两个状态的起始和终止位置。
 
-![css动画](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/136.jpg)
+![css动画](https://pengfeiw.github.io/images/blog/136.jpg)
 
 ### `@keyframes`
 
@@ -100,7 +100,7 @@
 
 `cubic-bezier`是三次贝塞尔曲线，主要是为`animation`生成速度的函数。它接受四个值，值范围为0-1，`cubic-bezier(x1, y1, x2, y2)`。
 
-![cubic-bezier](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/137.jpg)
+![cubic-bezier](https://pengfeiw.github.io/images/blog/137.jpg)
 
 - p0: 为默认值(0, 0)
 - p1: 需要设置的点(x1, y1)

Original file line number	Diff line number	Diff line change
@@ -193,7 +193,7 @@ css还支持用图片设置边框。`border-image`属性允许用户设置图片
`193`	`193`	`border-image-slice: 61 58 51 48;`
`194`	`194`	`}`
`195`	`195`	```
`196`		`-![border-image-slice](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/129.jpg)`
	`196`	`+![border-image-slice](https://pengfeiw.github.io/images/blog/129.jpg)`
`197`	`197`
`198`	`198`	经过四条分割线，图片被分成9个区域：四个角（左上、右上、右下和左下）、四边（上、右、下、左）和中间区域。四个角区域用于渲染元素盒子的四个角，四边区域用于渲染元素的边缘。`border-image-repeat`定义了它们是如何填充各自负责的空间的。`border-image-width`定义了边框的宽度。
`199`	`199`