8000 update image path · coder22010/css-tutorial@8ce714a · GitHub
[go: up one dir, main page]
Skip to content

Commit 8ce714a

Browse files
author
fangyan
committed
update image path
1 parent c684ef0 commit 8ce714a

13 files changed

+21
-21
lines changed

‎chapters/001 盒模型.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121

2222
盒模型由图中几个区域组成，每个区域都有不同的作用。
2323

24-
![盒模型](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/91.jpg)
24+
![盒模型](https://pengfeiw.github.io/images/blog/91.jpg)
2525

2626
*盒模型组成：Margin box(外边距)、Border box(边框)、Padding box(内边距)、Content box(内容)*
2727

@@ -32,7 +32,7 @@
3232

3333
在谷歌浏览器中，点击F12打开开发者工具，选中一个元素，可以在下方样式看到该元素的盒子各区域尺寸详情。
3434

35-
![盒模型](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/92.jpg)
35+
![盒模型](https://pengfeiw.github.io/images/blog/92.jpg)
3636

3737
通常，浏览器会给我们的html页面设置一个默认样式（user agent style）。例如，一个段落`p`的`display`为`block`，而`span`的`display`为`inline`，这些都是默认的样式。我们可以通过设置css来覆盖这些默认样式。
3838

‎chapters/004 特征性.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ a.my-class.another-class[href]:hover {
136136

137137
至此你应该知道了如何去计算一个选择性的权重（分数）。如何去写一个规则覆盖另一个规则。下面的示意图很好的总结了各类型选择器的权重（分数）。
138138

139-
![css选择器权重](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/93.jpg)
139+
![css选择器权重](https://pengfeiw.github.io/images/blog/93.jpg)
140140

141141
最左侧是id选择器，中间是类选择器、属性选择器和伪类选择器，最后面是元素选择器和伪元素选择器。
142142

‎chapters/005 继承.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ html页面中每个css属性都有一个预定义的默认值。如果级联算
5757

5858
其中有一些属性是可以继承的，例如上面列举的那些属性。如果有一个元素有父元素，并且父元素定义了某个可继承css属性的值，那么这个元素的对应的属性值将会从其父节点元素继承，如果该元素自己也定义了该css属性的值，那个这个值会覆盖从父节点继承的属性值。我们可以在谷歌浏览器中，按F12打开开发者工具在样式面板中，从computed页面看到各个属性的计算详情。
5959

60-
![css继承](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/94.jpg)
60+
![css继承](https://pengfeiw.github.io/images/blog/94.jpg)
6161

6262
## 四. 显式控制继承
6363

‎chapters/006 颜色.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ h1 {
6969
```
7070
HSL表示色彩、饱和度、亮度。Hue描述了色轮上的颜色值，从0度到360度，0度表示红色（360度也是红色），180度或者50%表示蓝色。
7171

72-
![css color](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/95.jpg)
72+
![css color](https://pengfeiw.github.io/images/blog/95.jpg)
7373

7474
Saturation表示所选颜色的亮度。饱和度为0%，将显示为灰色。lightness表述的是光照强度，你可以想像一个红色的物体在不同光照强度下表现的颜色，当lightness为100%，最终显示为白色，当lightness为0%,最终显示为黑色。注意Saturation和lightness参数必须传百分比数值。这个lightness其实就是图形学中的[颜色反射定律](https://pengfeixc.com/blogs/computer-graphics/color-and-feng-illumination-model)。
7575

‎chapters/007 尺寸单位.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ css提供了一些相对于元素字体大小的相对单位。
113113
| ic | "水"字形 |
114114
| rlh | 根节点行高 |
115115

116-
![css尺寸单位](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/96.jpg)
116+
![css尺寸单位](https://pengfeiw.github.io/images/blog/96.jpg)
117117

118118
#### 视口相对单位
119119

‎chapters/008 布局.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ CSS为我们提供了多种布局方式，有水平轴布局，垂直轴布局
1717
```
1818
inline元素被称为行内元素，行内元素就像一段语句中的一个单词。它们在行内方向上紧挨着彼此。像`<span>`和`<strong>`元素就是典型的行内元素，它们在`<p>`（段落，`<p>`是一个block元素，后面将会介绍block元素）中都是紧挨着彼此的。它们同样拥有周围的空间，即`padding`、`border`和`margin`属性都是有效的。
1919

20-
![css布局](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/120.jpg)
20+
![css布局](https://pengfeiw.github.io/images/blog/120.jpg)
2121

2222
你无法设置行内元素的`width`和`height`属性。block层级的margin和padding将会被周围的元素忽略（这句话的英文原文是*Any block level margin and padding will be ignored by the surrounding elements*，我不清楚这样翻译是否合适）。
2323

‎chapters/011 逻辑属性.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@
77
**块流（Block flow）**指的是块排列的方向。例如有两个段落，块流动的方向就是从第一个块到第二个块。在英文文档中，块流动方向是从上到下。
88

99
下一个段落在上一个段落的下方。
10-
![CSS Block FLow](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/122.jpg)
10+
![CSS Block FLow](https://pengfeiw.github.io/images/blog/122.jpg)
1111

1212
## 二.内联流（Inline flow）
1313

1414
**内联流**的方向就是一行文本的书写方向（页面渲染一行文字的方向）。在英文文档中内内联流的方向是从左至右。如果你将网页页面语言更改为*Arabic*（`<html lang="ar">`），内联流方向将变为从右至左。
15-
![CSS Inline Flow](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/123.jpg)
15+
![CSS Inline Flow](https://pengfeiw.github.io/images/blog/123.jpg)
1616

1717
文本流动的方向由页面的**书写模式**决定。我们可以通过更改`writing-mode`来更改文字的流动方向。`writing-mode`可以设置以下几种值：
1818
- `horizontal-tb`：文本流的方向是水平方向的（从左至右），元素是从上往下（tb：top-bottom）堆叠。
@@ -49,7 +49,7 @@
4949
>
5050
>此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
5151
52-
![css float direction](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/120.jpg)
52+
![css float direction](https://pengfeiw.github.io/images/blog/120.jpg)
5353

5454
## 四.尺寸
5555

‎chapters/012 间距.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
first，假设有三个box，从上往下堆叠在一起。现在你想在它们之前添加一个间距，你有几种方式处理这个问题呢？
66

7-
![css spacing](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/124.jpg)
7+
![css spacing](https://pengfeiw.github.io/images/blog/124.jpg)
88

99
`margin`属性也许正好能满足你现在的要求，但是它可能会添加了额外的边距，超出了你的预期。例如，你如何调整边距正好处在这些元素的之间？可能`gap`属性更适合这种情况。调整元素的间距有很多方式，每种方式都有它们的优点和使用场景。
1010

@@ -29,7 +29,7 @@ HTML还提供了一些HTML实体（HTML entities），它们是保留的字符
2929

3030
如果你想在元素box外侧添加一个边距，可以使用`margin`属性。`margin`属性是`margin-top`、`margin-right`、`margin-bottom`和`margin-left`的简写。
3131

32-
![box model](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/125.jpg)
32+
![box model](https://pengfeiw.github.io/images/blog/125.jpg)
3333

3434
以下两种方式等价：
3535
```css
@@ -109,7 +109,7 @@ margin-left: 4px;
109109

110110
`padding`与`margin`相似，但是它是在盒子内部创建一个边距，称之为内边距。
111111

112-
![css padding](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/126.jpg)
112+
![css padding](https://pengfeiw.github.io/images/blog/126.jpg)
113113

114114
如果元素设置了`padding`，那么在不同`box-sizing`属性值时，元素的尺寸也不同。
115115
<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" al 10000 lowfullscreen="true">
@@ -154,7 +154,7 @@ margin-left: 4px;
154154

155155
在[Grid](http://pengfeixc.com/tutorial/css/grid)和[Flex](http://pengfeixc.com/tutorial/css/flex)中，可以使用`gap`属性，在元素中间添加一个间距。
156156

157-
![Grid和Flex](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/127.jpg)
157+
![Grid和Flex](https://pengfeiw.github.io/images/blog/127.jpg)
158158

159159
## 六.间距一致
160160

‎chapters/013 伪元素.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*伪元素的作用是在不添加任何html代码的情况下可以拥有添加额外的元素的功能，或者是指定某个目标元素。你可以在本节学习伪元素的相关知识。*
44

55
如果你的上司安排给你一个任务，将一篇文章的每个段落的首字母变大，你将如何实现这个功能呢？
6-
![css伪元素](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/128.jpg)
6+
![css伪元素](https://pengfeiw.github.io/images/blog/128.jpg)
77

88
幸运的是，css恰好提供了这个功能。你可以使用`::first-letter`实现这个需求。
99
```css

‎chapters/015 边框.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ css还支持用图片设置边框。`border-image`属性允许用户设置图片
193193
border-image-slice: 61 58 51 48;
194194
}
195195
```
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)
197197

198198
经过四条分割线，图片被分成9个区域：四个角（左上、右上、右下和左下）、四边（上、右、下、左）和中间区域。四个角区域用于渲染元素盒子的四个角，四边区域用于渲染元素的边缘。`border-image-repeat`定义了它们是如何填充各自负责的空间的。`border-image-width`定义了边框的宽度。
199199

‎chapters/018 z-index和栈空间.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ MDN中还提到了下面两点内容，作为补充。
3232

3333
每个元素box都属于一个栈空间，这些元素box在栈空间内都有一个整数的**栈层级**，元素的**栈层级**可以用`z-index`，默认**栈层级**为0，同一个栈空间内，栈层级大的元素永远在栈层级小的元素的前面，栈层级大表示其z坐标大，越靠近屏幕外面，离人眼越近，所以一般我们可以通过设置`z-index`使某个元素显示在其他元素的上面。
3434

35-
![stacking context](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/130.jpg)
35+
![stacking context](https://pengfeiw.github.io/images/blog/130.jpg)
3636

3737
### 栈空间的创建
3838

‎chapters/020 渐变.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
假设公司的UI递过来一份web设计稿让你完成。主页面的header是一段文字和一个按钮，背景是一个渐变色的背景图，你如何去完成这个header呢？
66

7-
![css渐变](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/134.jpg)
7+
![css渐变](https://pengfeiw.github.io/images/blog/134.jpg)
88

99
如果你没有用过css渐变，你可能会想到用图片处理软件创建一个背景图，然后使用`background`属性设置header的背景图片来完成任务。但是css提供了`linear-gradient`，可以很方便的解决这个问题。
1010
<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">

‎chapters/021 动画.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,11 @@
1616

1717
整个动画在两种状态间变化，每轮变化时间为1秒。
1818

19-
![css动画](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/135.jpg)
19+
![css动画](https://pengfeiw.github.io/images/blog/135.jpg)
2020

2121
这个动画有两个关键控制点：两个状态的起始和终止位置。
2222

23-
![css动画](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/136.jpg)
23+
![css动画](https://pengfeiw.github.io/images/blog/136.jpg)
2424

2525
### `@keyframes`
2626

@@ -100,7 +100,7 @@
100100

101101
`cubic-bezier`是三次贝塞尔曲线，主要是为`animation`生成速度的函数。它接受四个值，值范围为0-1，`cubic-bezier(x1, y1, x2, y2)`。
102102

103-
![cubic-bezier](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/137.jpg)
103+
![cubic-bezier](https://pengfeiw.github.io/images/blog/137.jpg)
104104

105105
- p0: 为默认值(0, 0)
106106
- p1: 需要设置的点(x1, y1)

0 commit comments

Comments
 (0)
0