diff --git a/02-CSS基础/01-CSS属性：字体属性和文本属性.md b/02-CSS基础/01-CSS属性：字体属性和文本属性.md
index 49f386e..f1c975e 100644
--- a/02-CSS基础/01-CSS属性：字体属性和文本属性.md
+++ b/02-CSS基础/01-CSS属性：字体属性和文本属性.md
@@ -69,6 +69,13 @@ CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直
+### `vertical-align: middle;` 属性
+
+```css
+vertical-align: middle; /*指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/
+
+```
+
### font字体属性
css样式中，字体属性有以下几种：
diff --git a/02-CSS基础/02-CSS属性：背景属性.md b/02-CSS基础/02-CSS属性：背景属性.md
index 2505cd9..82ddbe9 100644
--- a/02-CSS基础/02-CSS属性：背景属性.md
+++ b/02-CSS基础/02-CSS属性：背景属性.md
@@ -4,10 +4,7 @@
> 以下是正文。
-
-## background系列属性
-
-### 常见背景属性
+## background 的常见背景属性
CSS样式中，常见的背景属性有以下几种：（经常用到，要记住）
@@ -25,58 +22,74 @@ CSS样式中，常见的背景属性有以下几种：（经常用到，要记
- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。
属性值可以是：`scroll`（与fixed属性相反，默认属性）、`fixed`（背景就会被固定住，不会被滚动条滚走）。
-- 另外还有一个简写属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。
+- 另外还有一个综合属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。
上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。
+## background-color：背景颜色的表示方法
-### background-color：背景颜色的表示方法
-
-css2.1中，背景颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。
+css2.1 中，背景颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。
比如红色可以有下面的三种表示方法：
-```
+```css
background-color: red;
background-color: rgb(255,0,0);
background-color: #ff0000;
```
+CSS3 中，有一种新的表示颜色的方式：RGBA或者HSLA。
+
+RGBA、HSLA可应用于**所有**使用颜色的地方。
+
下面分别介绍。
-**1、用英语单词来表示：**
+### 用英语单词表示
-能够用英语单词来表述的颜色，都是简单颜色。比如红色：
+能够用英语单词来表述的颜色，都是简单颜色。比如红色、绿色等。代码举例：
-```
+```css
background-color: red;
```
+### RGB 表示法
-**2、rgb表示法：**
-
-rgb表示三原色“红”red、“绿”green、“蓝”blue。
+RGB 表示三原色“红”red、“绿”green、“蓝”blue。
光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。
比如红色：
-```
+```css
background-color: rgb(255,0,0);
```
黑色：
-```
+```css
background-color: rgb(0,0,0);
```
颜色可以叠加，比如黄色就是红色和绿色的叠加：
-```
+```css
background-color: rgb(255,255,0);
```
-**3、十六进制表示法：**
+### RGBA 表示法
+
+```javascript
+ background-color: rgba(0, 0, 255, 0.3);
+
+ border: 30px solid rgba(0, 255, 0, 0.3);
+```
+
+解释：
+
+- RGBA 即：Red、Green、Blue、Alpha
+
+- R、G、B 的取值范围是：0~255
+
+### 十六进制表示法
比如红色：
@@ -84,7 +97,7 @@ background-color: rgb(255,255,0);
background-color: #ff0000;
```
-PS:所有用#开头的值，都是16进制的。
+PS:所有用`#`开头的值，都是16进制的。
这里，我们就要学会16进制与10进制之间的转换。下面举几个例子。
@@ -98,7 +111,6 @@ PS:所有用#开头的值，都是16进制的。
`background-color: #123456;`等价于`background-color: rgb(18,52,86);`
-
**十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc**。举例如下：
比如：
@@ -148,8 +160,37 @@ PS:所有用#开头的值，都是16进制的。
#ccc 浅灰
```
+### HSLA 表示法
-### `background-repeat`属性（重要）
+举例：
+
+```javascript
+ background-color: hsla(240,50%,50%,0.4);
+```
+
+解释：
+
+- `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
+
+- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。
+
+- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
+
+- `A` 透明度，取值范围 0~1。
+
+如果不知道 H 的值该设置多少，我们不妨来看一下**色盘**：
+
+
+
+推荐链接：[配色宝典](http://www.uisdc.com/how-to-create-color-palettes)
+
+**关于设置透明度的其他方式：**
+
+（1）`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
+
+（2）`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
+
+## `background-repeat`属性
`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
@@ -182,7 +223,7 @@ PS：padding的区域也是有背景图的。
-### `background-position`属性
+## `background-position`属性
`background-position`属性指的是**背景定位**属性。公式如下：
@@ -267,7 +308,7 @@ PS：padding的区域也是有背景图的。
上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。
-### background-attachment属性
+## background-attachment 属性
- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
- `fixed`（背景就会被固定住，不会被滚动条滚走）。
@@ -283,13 +324,13 @@ background属性和border一样，是一个综合属性，可以将多个属性
举例1:
-```
+```css
background:red url(1.jpg) no-repeat 100px 100px fixed;
```
等价于：
-```
+```css
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
@@ -303,7 +344,7 @@ background属性和border一样，是一个综合属性，可以将多个属性
比如说，对于下面这样的属性：
-```
+```css
background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
```
@@ -311,11 +352,8 @@ background属性和border一样，是一个综合属性，可以将多个属性
-
PS：以后的CSS3内容中，我们会接触到更多的background属性： background-origin、background-clip、background-size（在CSS2.1背景图片是不能调整尺寸，IE9开始兼容）、多背景。
-
-
## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
diff --git a/02-CSS基础/06-CSS盒模型详解.md b/02-CSS基础/06-CSS盒模型详解.md
index 1a665fd..520cfe9 100644
--- a/02-CSS基础/06-CSS盒模型详解.md
+++ b/02-CSS基础/06-CSS盒模型详解.md
@@ -10,7 +10,6 @@
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
-
### 盒子中的区域
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
@@ -24,20 +23,14 @@
-
-
-
代码演示：
-
-
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
注意：**宽度和真实占有宽度，不是一个概念！**来看下面这例子。
-
### 标准盒模型和IE盒模型
> 我们目前所学习的知识中，以标准盒子模型为准。
@@ -52,10 +45,8 @@ IE盒子模型：
上图显示：
-
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
-
- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
- padding：内边距。
- border：边框。
@@ -63,14 +54,12 @@ IE盒子模型：
CSS盒模型和IE盒模型的区别：
- - 在 **标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
+- 在 **标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
- - **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。
+- **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。
- 注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
-
-
+注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
### ``标签也有margin
@@ -116,10 +105,7 @@ CSS盒模型和IE盒模型的区别：
-
-
-### 认识width、height
-
+## 认识width、height
一定要知道，在前端开发工程师眼中，世界中的一切都是不同的。
@@ -127,8 +113,6 @@ CSS盒模型和IE盒模型的区别：
-
-
下面这两个盒子，真实占有宽高，都是302*302：
盒子1：
@@ -154,7 +138,6 @@ CSS盒模型和IE盒模型的区别：
```
-
真实占有宽度 = 左border + 左padding + width + 右padding + 右border
上面这两个盒子的盒模型图如下：
@@ -165,12 +148,9 @@ CSS盒模型和IE盒模型的区别：
**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
+## 认识padding
-### 认识padding
-
-
-#### padding区域也有颜色
-
+### padding区域也有颜色
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有border以内的区域。**
@@ -178,9 +158,7 @@ padding就是内边距。padding的区域有背景颜色，css2.1前提下，并
-
-
-#### padding有四个方向
+### padding有四个方向
padding是4个方向的，所以我们能够分别描述4个方向的padding。
@@ -188,7 +166,7 @@ padding是4个方向的，所以我们能够分别描述4个方向的padding。
小属性的写法：
-```
+```css
padding-top: 30px;
padding-right: 20px;
padding-bottom: 40px;
@@ -197,7 +175,7 @@ padding是4个方向的，所以我们能够分别描述4个方向的padding。
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
-```
+```css
padding:30px 20px 40px 100px;
```
@@ -213,7 +191,6 @@ padding: 30px 40px;
则顺序等价于：30px 40px 30px 40px;
-
要懂得，**用小属性层叠大属性**。比如：
```
@@ -225,7 +202,6 @@ padding-left: 30px;
-
下面的写法：
```
@@ -235,10 +211,9 @@ padding: 20px;
第一行的小属性无效，因为被第二行的大属性层叠掉了。
-
下面的题，会做了，说明你明白了。
-#### 一些题目
+### 一些题目
**题目1**：说出下面盒子真实占有宽高，并画出盒模型图。
@@ -252,14 +227,10 @@ padding: 20px;
}
```
-
答案：
-
-
-
**题目2**：说出下面盒子真实占有宽高，并画出盒模型图。
```css
@@ -280,18 +251,15 @@ padding: 20px;
盒子模型如下：
-
-
**题目3**：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
-
答案：
-```
+```css
width:123px;
height:123px;
padding:20px 40px;
@@ -302,10 +270,9 @@ padding: 20px;
-
答案：
-```
+```css
width:123px;
height:123px;
padding:20px;
@@ -314,29 +281,25 @@ padding: 20px;
```
-
-
-#### 一些元素，默认带有padding
+### 一些元素，默认带有padding
一些元素，默认带有`padding`，比如ul标签。如下：
-
上图显示，不加任何样式的ul，也是有40px的padding-left。
所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding。
可以使用`*`进行清除：
-```
+```css
*{
margin: 0;
padding: 0;
}
```
-
但是，`*`的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：
```
@@ -346,45 +309,48 @@ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
}
```
-
-
-### 认识border
+## 认识border
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
-颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。
+比如：
-#### border-style
+```css
+
+.div1{
+ width: 10px;
+ height: 10px;
+ border: 2px solid red;
+}
+
+```
+
+颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。
+
+### border-style
border的所有的线型如下：（我们可以通过查看`CSS参考手册`得到）
-
比如`border:10px ridge red;`这个属性，在chrome和firefox、IE中有细微差别：（因为可以显示出效果，因此并不是兼容性问题，只是有细微差别而已）
-
如果公司里面的设计师是处女座的，追求极高的**页面还原度**，那么不能使用css来制作边框。就要用到图片，就要切图了。
所以，比较稳定的border-style就几个：solid、dashed、dotted。
-
-
-
-
-
-#### border拆分
+### border拆分
border是一个大综合属性。比如说：
-```
+```css
border:1px solid red;
```
-就是把4个边框，都设置为1px宽度、线型实线、red颜色。
+就是把上下左右这四个方向的边框，都设置为 1px 宽度、线型实线、red颜色。
PS：小技巧：在sublime text中，为了快速输入`border:1px solid red;`这个属性，可以直接输入`bd`，然后选第二个后回车。
@@ -406,16 +372,13 @@ border-color:red green blue yellow;
-
-
（1）按三要素拆：
-```
+```css
border-width:10px; //边框宽度
border-style:solid; //线型
border-color:red; //颜色。
```
-
等价于：
```
@@ -424,7 +387,7 @@ border:10px solid red;
(2)按方向来拆：
-```
+```css
border-top:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
@@ -433,15 +396,13 @@ border-left:10px solid red;
等价于：
-```
+```css
border:10px solid red;
```
（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)
-
-
-```
+```css
border-top-width:10px;
border-top-style:solid;
border-top-color:red;
@@ -456,57 +417,75 @@ border:10px solid red;
border-left-color:red;
```
-
等价于：
-```
+```css
border:10px solid red;
```
-
工作中到底用什么？很简答：什么简单用什么。但要懂得，用小属性层叠大属性。举例如下：
-
为了实现上方效果，写法如下：
-```
+```css
border:10px solid red;
border-right-color:blue;
```
-
为了实现上方效果，写法如下：
-```
+```css
border:10px solid red;
border-style:solid dashed;
```
border可以没有：
-```
+```css
border:none;
```
可以某一条边没有：
-```
+```css
border-left: none;
```
也可以调整左边边框的宽度为0：
-```
+```css
border-left-width: 0;
```
+### border-image 属性
-#### 举例：利用border属性画一个三角形（小技巧）
+比如：
+
+```css
+border-image: url(.img.png) 30 round;
+```
+
+这个属性在实际开发中用得不多，暂时忽略。
+
+### 举例1：利用 border 属性画一个三角形（小技巧）
+
+完整代码如下：
+
+```css
+div{
+ width: 0;
+ height: 0;
+ border: 50px solid transparent;
+ border-top-color: red;
+ border-bottom: none;
+}
+
+```
步骤如下：
@@ -514,24 +493,39 @@ border-left-width: 0;
-
（2）然后将border的底部取消：
-
-（3）最后设置border的左边和右边为白色：
+（3）最后设置border的左边和右边为白色或者**透明**：
-
这样，一个三角形就画好了。
+### 举例2：利用 border 属性画一个三角形（更推荐的技巧）
+上面的例子1中，画出来的是直角三角形，可如果我想画等边三角形，要怎么做呢？
+完整代码如下：（用 css 画等边三角形）
+```css
+.div1{
+ width: 0;
+ height: 0;
+ border-top: 30px solid red;
+ /* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
+ border-left: 20px solid transparent;
+ border-right: 20px solid transparent;
+}
+```
+效果如下：
+
+
+
+另外，我们在上方代码的基础之上，再加一个 `border-radus: 20px;` 就能画出一个扇形。
## 我的公众号
@@ -542,4 +536,3 @@ border-left-width: 0;
-
diff --git a/02-CSS基础/09-CSS案例讲解：博雅互动.md b/02-CSS基础/09-CSS案例讲解：博雅互动.md
index 75a34e0..d1c01b7 100644
--- a/02-CSS基础/09-CSS案例讲解：博雅互动.md
+++ b/02-CSS基础/09-CSS案例讲解：博雅互动.md
@@ -1,6 +1,5 @@
-
## 前言
> CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以[博雅互动](http://www.boyaa.com/)的官网首页举例。
@@ -17,13 +16,10 @@
我们量一下中间四个方形图的width，是1000px，所以，网页版心的宽度是1000px。
-
### 网页的结构
从结构上来看，网页分为头部（导航栏）、banner区、内容区、底部。
-
-
## 导航栏的制作
在此我们只讲基础知识的使用，不涉及浏览器的优化。
@@ -35,8 +31,6 @@
现在我们需要在`class=inner_c`里放三个东西：左侧的logo、中间的导航栏、右侧的“加入我们”。
-
-
接下来我们开始做右侧的「加入我们」，「加入我们」的背景是带圆角的矩形，这个圆角，实现的方式有两种：要么切图，要么用CSS3实现（IE 7、IE 8不兼容）。我们暂时使用切图来实现。
我们最好把「加入我们」这个超链接``放到`div`里，然后设置div的margin和padding，而不是直接设置``的边距。
@@ -50,7 +44,6 @@
最终，导航栏的代码如下：
-
```html
@@ -167,22 +160,18 @@
-
## banenr图
> 因为涉及到 js 的内容，这里先不讲内容区域**轮播图**的效果。
我们首先在导航条和banner图之间加一道墙，即`class=cl`，然后采用隔墙法对其设置`clear: both;`的属性。
-
然后设置banner的背景图片属性，添加banner图。
-
## 内容区域的制作
导航栏+banner+内容区域的完整代码如下：
-
```html
@@ -394,7 +383,6 @@
代码解释：
-
（1）导航栏，左侧的logo：
**错误的写法：**
@@ -417,7 +405,6 @@
}
```
-
这样写虽然视觉效果上达到了，但是搜索引擎是搜不到图片的，不利于SEO。
**正确的写法：**
@@ -432,7 +419,6 @@
```
-
然后将**logo设置为背景图**：
```css
@@ -459,50 +445,28 @@
（1）内容区域，“点击播放”右侧的小三角形：
-
我们在“点击播放”的右侧放了一个三角形。这个很有技巧。
-
-
代码截取如下：
-
-
```css
- .content .product ul li p.djbf a{
- font-size: 12px;
- color:#38B774;
- text-decoration: none;
- background:url(images/sanjiaoxing.png) no-repeat right center;
- padding-right: 12px;
- }
+ .content .product ul li p.djbf a{
+ font-size: 12px;
+ color:#38B774;
+ text-decoration: none;
+ background:url(images/sanjiaoxing.png) no-repeat right center;
+ padding-right: 12px;
+ }
```
上方代码中，我们在第6行给“点击播放”这个超链接加一个右padding（很关键），然后在第5行把小三角这个背景图放在右padding的位置，就能达到想要的视觉效果。
-
-
-（2）
-
-
-导航栏+banner+内容区域的效果如下：
-
+（2）导航栏+banner+内容区域的效果如下：
+工程文件如下：
-
-
-
-
-
-
-
-
-
-
-
-
-
+- [2018-03-20-boya.rar](待审核通过)
\ No newline at end of file
diff --git a/02-CSS基础/12-CSS3属性详解（一）.md b/02-CSS基础/12-CSS3属性详解（一）.md
index a29f8d8..648db81 100644
--- a/02-CSS基础/12-CSS3属性详解（一）.md
+++ b/02-CSS基础/12-CSS3属性详解（一）.md
@@ -1,6 +1,4 @@
-
-
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8430898.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
@@ -11,8 +9,6 @@
本文主要内容：
-- 颜色
-
- 文本
- 盒模型中的 box-sizing 属性
@@ -25,54 +21,6 @@
- 渐变
-## 颜色
-
-CSS3中，有一种新的表示颜色的方式：RGBA或者HSLA。
-
-RGBA、HSLA可应用于**所有**使用颜色的地方。
-
-**RGBA 举例**：
-
-```javascript
- background-color: rgba(0, 0, 255, 0.3);
-
- border: 30px solid rgba(0, 255, 0, 0.3);
-```
-
-解释：
-
-- RGBA 即：Red、Green、Blue、Alpha
-
-- R、G、B 的取值范围是：0~255
-
-**HSLA 举例**：
-
-```javascript
- background-color: hsla(240,50%,50%,0.4);
-```
-
-解释：
-
-- `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
-
-- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。
-
-- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
-
-- `A` 透明度，取值范围 0~1。
-
-如果不知道 H 的值该设置多少，我们不妨来看一下**色盘**：
-
-
-
-推荐链接：[配色宝典](http://www.uisdc.com/how-to-create-color-palettes)
-
-**关于设置透明度的其他方式：**
-
-（1）`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
-
-（2）`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
-
## 文本
@@ -531,7 +479,7 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽
上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。
-## 渐变
+## 渐变：background-image
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
@@ -547,8 +495,6 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽
-注意，渐变属于背景图片属性`background-image`的属性值。我们依次来看一下。
-
### 线性渐变
格式：
@@ -849,7 +795,7 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽
上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。
-CSS3的更多属性，且听下文继续。
+CSS3的更多属性，且看下文继续。
## 我的公众号
diff --git a/03-CSS进阶/02-CSS中的非布局样式.md b/03-CSS进阶/02-CSS中的非布局样式.md
index e6c14ee..e085519 100644
--- a/03-CSS进阶/02-CSS中的非布局样式.md
+++ b/03-CSS进阶/02-CSS中的非布局样式.md
@@ -8,13 +8,17 @@ CSS中，有很多**非布局样式**，这些样式（属性）和与布局无
- 滚动、换行
- 装饰性属性（粗体、斜体、下划线）等。
+这篇文章，我们来对上面的部分样式做一个回顾。
+
## 字体
### 字体分类
-常见的字体可以可以分为两类：**衬线体、无衬线体**。
+常见的字体可以分为两类：**衬线体、无衬线体**。
-**1、serif（衬线体）**：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。比如：宋体。
+
+
+**1、serif（衬线体）**：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。比如：宋体、楷体。
**2、sans-serif（无衬线体）**：笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高。
@@ -25,14 +29,14 @@ CSS中，有很多**非布局样式**，这些样式（属性）和与布局无
- Arial：Windows平台默认的英文字体
- 苹方（PingFang SC）：Mac & iOS 平台的中文字体
- San Francisco：Mac & iOS 平台的英文字体
-- [思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)。是Adobe和Google 在2014年7月联合推出的一款开源字体。
+- [思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)。是 Adobe 和 Google 在2014年7月联合推出的一款开源字体。
-20191004_1100.png
补充：
-- 海报设计、PPT不要用宋体。
-- 乔布斯
+（1）海报设计、PPT不要用宋体。
+
+（2）乔布斯
参考链接：[如何优雅的选择字体(font-family)](https://segmentfault.com/a/1190000006110417)
@@ -41,14 +45,14 @@ CSS中，有很多**非布局样式**，这些样式（属性）和与布局无
css 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类：
- serif:衬线体。
-- sans-serif：无衬线体
+- sans-serif：无衬线体。
- monospace：等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。
- cursive：手写字体。比如徐静蕾手写体。
- fantasy：梦幻字体。比如一些艺术字。
-这五类字体组不代表某一个具体的字体，而是当你在 css 中指定字体族的时候，就有可能从中找出一种字体来显示。
+这五类字体族不代表某一个具体的字体，而是当你在 css 中指定字体族的时候，就有可能在字体族中找出一种字体来显示。
-20191004_1130.png
+
参考链接：[serif，sans-serif，monospace，cursive和fantasy](http://www.ayqy.net/blog/serif%EF%BC%8Csans-serif%EF%BC%8Cmonospace%EF%BC%8Ccursive%E5%92%8Cfantasy/)
@@ -75,7 +79,15 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
- 网络字体
-- iconfont
+- [iconfont](https://www.iconfont.cn/)
+
+## 边框
+
+如何用边框画一个三角形？详见《02-CSS基础/06-CSS盒模型详解》中的最后一段。
+
+
+
+
diff --git a/10-ES6/09-ES6：字符串、数组、对象的扩展.md b/10-ES6/09-ES6：字符串、数组、对象的扩展.md
index 195446b..0f0b817 100644
--- a/10-ES6/09-ES6：字符串、数组、对象的扩展.md
+++ b/10-ES6/09-ES6：字符串、数组、对象的扩展.md
@@ -85,7 +85,7 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下：
## 数组的扩展
-> 下面提到的数组的几个方法，更详细的内容，可以看《03-JavaScript基础/17-数组的其他方法.md》。
+> 下面提到的数组的几个方法，更详细的内容，可以看《04-JavaScript基础/17-数组的常见方法.md》。
### 扩展1：Array.from()
diff --git a/15-面试题积累/02-HTML和CSS相关.md b/15-面试题积累/02-HTML和CSS相关.md
index ef6ac3f..7643b66 100644
--- a/15-面试题积累/02-HTML和CSS相关.md
+++ b/15-面试题积累/02-HTML和CSS相关.md
@@ -197,7 +197,7 @@ html代码：
.child {
display: table-cell;
- vertical-align: middle; /*来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/
+ vertical-align: middle; /*指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/
height: 200px; /*此处的宽高设置无效*/
width: 200px;
border: 10px solid blue;
diff --git a/17-前端综合/CSS开发总结.md b/17-前端综合/CSS开发总结.md
new file mode 100644
index 0000000..c5c9722
--- /dev/null
+++ b/17-前端综合/CSS开发总结.md
@@ -0,0 +1,13 @@
+
+### p标签里的文字溢出怎么办
+
+加一个属性即可：
+
+```css
+ word-break: break-all;
+
+```
+
+### inline-block 相关
+
+图片默认是 inline-block 布局，会存在经典的底部 3px 的问题。
diff --git a/17-前端综合/css开发相关.md b/17-前端综合/css开发相关.md
deleted file mode 100644
index 6a763d7..0000000
--- a/17-前端综合/css开发相关.md
+++ /dev/null
@@ -1,10 +0,0 @@
-
-### p标签里的文字溢出怎么办
-
-加一个属性即可：
-
-```css
- word-break: break-all;
-
-```
-