add: 用css border 画等边三角形

02-CSS基础/01-CSS属性：字体属性和文本属性.md

@@ -69,6 +69,13 @@ CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直
 
 ![](http://img.smyhvae.com/20170808_2240.png)
 
+### `vertical-align: middle;` 属性
+
+```css
+vertical-align: middle; /*指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/
+
+```
+
 ### font字体属性
 
 css样式中，字体属性有以下几种：

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://img.smyhvae.com/20180207_1545.png)
+
+推荐链接：[配色宝典](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的区域也是有背景图的。
 ![](http://img.smyhvae.com/2015-10-03-css-22.png)
 
 
-### `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一样，是一个综合属性，可以将多个属性
 
 ![](http://img.smyhvae.com/20170813_1515.png)
 
-
 PS：以后的CSS3内容中，我们会接触到更多的background属性： background-origin、background-clip、background-size（在CSS2.1背景图片是不能调整尺寸，IE9开始兼容）、多背景。
 
-
-
 ## 我的公众号
 
 想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。

02-CSS基础/06-CSS盒模型详解.md

@@ -10,7 +10,6 @@
 
 但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
 
-
 ### 盒子中的区域
 
 一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
@@ -24,20 +23,14 @@
 
 ![](http://img.smyhvae.com/20170727_2128.png)
 
-
-
-
 代码演示：
 
 ![](http://img.smyhvae.com/20170727_2326.png)
 
-
-
 上面这个盒子，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盒模型的区别：
 
- - 在 <font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
+- 在 <font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
 
- - <font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
+- <font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
 
 
- 注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
+注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
-<br>
-
 
 ### `<body>`标签也有margin
 
@@ -116,10 +105,7 @@ CSS盒模型和IE盒模型的区别：
 
 ![](http://img.smyhvae.com/20151003_27.png)
 
-
+## 认识width、height
-
-### 认识width、height
-
 
 一定要知道，在前端开发工程师眼中，世界中的一切都是不同的。
 
@@ -127,8 +113,6 @@ CSS盒模型和IE盒模型的区别：
 
 ![](http://img.smyhvae.com/20170727_2329.png)
 
-
-
 下面这两个盒子，真实占有宽高，都是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前提下，并
 
 ![](http://img.smyhvae.com/20170728_1005.png)
 
-
+### 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;
 
 ![](http://img.smyhvae.com/20170728_1039.png)
 
-
 下面的写法：
 
 ```
@@ -235,10 +211,9 @@ padding: 20px;
 
 第一行的小属性无效，因为被第二行的大属性层叠掉了。
 
-
 下面的题，会做了，说明你明白了。
 
-#### 一些题目
+### 一些题目
 
 **题目1**：说出下面盒子真实占有宽高，并画出盒模型图。
 
@@ -252,14 +227,10 @@ padding: 20px;
 	}
 ```
 
-
 答案：
 
 ![](http://img.smyhvae.com/20170728_1048.png)
 
-
-
-
 **题目2**：说出下面盒子真实占有宽高，并画出盒模型图。
 
 ```css
@@ -280,18 +251,15 @@ padding: 20px;
 
 盒子模型如下：
 
-
 ![](http://img.smyhvae.com/20170728_1100.png)
 
-
 **题目3**：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
 
 ![](http://img.smyhvae.com/20170728_1401.png)
 
-
 答案：
 
-```
+```css
 	width:123px;
 	height:123px;
 	padding:20px 40px;
@@ -302,10 +270,9 @@ padding: 20px;
 
 ![](http://img.smyhvae.com/20170728_1402.png)
 
-
 答案：
 
-```
+```css
 	width:123px;
 	height:123px;
 	padding:20px;
@@ -314,29 +281,25 @@ padding: 20px;
 
 ```
 
-
+### 一些元素，默认带有padding
-
-#### 一些元素，默认带有padding
 
 一些元素，默认带有`padding`，比如ul标签。如下：
 
 ![](http://img.smyhvae.com/20170728_1413.png)
 
-
 上图显示，不加任何样式的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参考手册`得到）
 
 ![](http://img.smyhvae.com/20170728_1435.png)
 
-
 比如`border:10px ridge red;`这个属性，在chrome和firefox、IE中有细微差别：（因为可以显示出效果，因此并不是兼容性问题，只是有细微差别而已）
 
 ![](http://img.smyhvae.com/20170728_1619.png)
 
 
-
 如果公司里面的设计师是处女座的，追求极高的**页面还原度**，那么不能使用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;
 
 ![](http://img.smyhvae.com/20170728_1516.png)
 
-
-
 （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;
 
 ```
 
-
 工作中到底用什么？很简答：什么简单用什么。但要懂得，用小属性层叠大属性。举例如下：
 
 ![](http://img.smyhvae.com/20170728_1606.png)
 
-
 为了实现上方效果，写法如下：
 
-```
+```css
 border:10px solid red;
 border-right-color:blue;
 ```
 
 ![](http://img.smyhvae.com/20170728_1608.png)
 
-
 为了实现上方效果，写法如下：
 
-```
+```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;
 
 ![](http://img.smyhvae.com/20170728_1640.png)
 
-
 （2）然后将border的底部取消：
 
 ![](http://img.smyhvae.com/20170728_1645.png)
 
-
+（3）最后设置border的左边和右边为白色或者**透明**：
-（3）最后设置border的左边和右边为白色：
 
 ![](http://img.smyhvae.com/20170728_1649.png)
 
-
 这样，一个三角形就画好了。
 
+### 举例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;
+}
 
+```
 
+效果如下：
+
+![](http://img.smyhvae.com/20191004_1830.png)
+
+另外，我们在上方代码的基础之上，再加一个 `border-radus: 20px;` 就能画出一个扇形。
 
 ## 我的公众号
 
@@ -542,4 +536,3 @@ border-left-width: 0;
 ![](http://img.smyhvae.com/2016040102.jpg)
 
 
-

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不兼容）。我们暂时使用切图来实现。
 
 我们最好把「加入我们」这个超链接`<a>`放到`div`里，然后设置div的margin和padding，而不是直接设置`<a>`的边距。
@@ -50,7 +44,6 @@
 
 最终，导航栏的代码如下：
 
-
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -167,22 +160,18 @@
 
 ![](http://img.smyhvae.com/20180114_1332.gif)
 
-
 ## banenr图
 
 > 因为涉及到 js 的内容，这里先不讲内容区域**轮播图**的效果。
 
 我们首先在导航条和banner图之间加一道墙，即`class=cl`，然后采用隔墙法对其设置`clear: both;`的属性。
 
-
 然后设置banner的背景图片属性，添加banner图。
 
-
 ## 内容区域的制作
 
 导航栏+banner+内容区域的完整代码如下：
 
-
 ```html
 <!DOCTYPE html>
 <html lang="en">
@@ -394,7 +383,6 @@
 
 代码解释：
 
-
 （1）导航栏，左侧的logo：
 
 **错误的写法：**
@@ -417,7 +405,6 @@
     }
 ```
 
-
 这样写虽然视觉效果上达到了，但是搜索引擎是搜不到图片的，不利于SEO。
 
 **正确的写法：**
@@ -432,7 +419,6 @@
 			</h1>
 ```
 
-
 然后将**logo设置为背景图**：
 
 ```css
@@ -459,50 +445,28 @@
 
 （1）内容区域，“点击播放”右侧的小三角形：
 
-
 我们在“点击播放”的右侧放了一个三角形。这个很有技巧。
 
 ![](http://img.smyhvae.com/20180115_1356.png)
 
-
-
 代码截取如下：
 
-
-
 ```css
-		.content .product ul li p.djbf a{
+    .content .product ul li p.djbf a{
-			font-size: 12px;
+        font-size: 12px;
-			color:#38B774;
+        color:#38B774;
-			text-decoration: none;
+        text-decoration: none;
-			background:url(images/sanjiaoxing.png) no-repeat right center;
+        background:url(images/sanjiaoxing.png) no-repeat right center;
-			padding-right: 12px;
+        padding-right: 12px;
-		}
+    }
 ```
 
 上方代码中，我们在第6行给“点击播放”这个超链接加一个右padding（很关键），然后在第5行把小三角这个背景图放在右padding的位置，就能达到想要的视觉效果。
 
-
+（2）导航栏+banner+内容区域的效果如下：
-
-（2）
-
-
-导航栏+banner+内容区域的效果如下：
-
 
 ![](http://img.smyhvae.com/20180114_1405.png)
 
+工程文件如下：
 
-
+- [2018-03-20-boya.rar](待审核通过)
-
-
-
-
-
-
-
-
-
-
-
-

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://img.smyhvae.com/20180207_1545.png)
-
-推荐链接：[配色宝典](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 对盒模型做出了新的定义，即允许开发人员**指定盒子宽
 
 ![](http://img.smyhvae.com/20180208_1140.png)
 
-注意，渐变属于背景图片属性`background-image`的属性值。我们依次来看一下。
-
 ### 线性渐变
 
 格式：
@@ -849,7 +795,7 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽
 
 上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。
 
-CSS3的更多属性，且听下文继续。
+CSS3的更多属性，且看下文继续。
 
 ## 我的公众号
 

03-CSS进阶/02-CSS中的非布局样式.md

@@ -8,13 +8,17 @@ CSS中，有很多**非布局样式**，这些样式（属性）和与布局无
 - 滚动、换行
 - 装饰性属性（粗体、斜体、下划线）等。
 
+这篇文章，我们来对上面的部分样式做一个回顾。
+
 ## 字体
 
 ### 字体分类
 
-常见的字体可以可以分为两类：**衬线体、无衬线体**。
+常见的字体可以分为两类：**衬线体、无衬线体**。
 
-**1、serif（衬线体）**：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。比如：宋体。
+![](http://img.smyhvae.com/20191004_1101.png)
+
+**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
+![](http://img.smyhvae.com/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盒模型详解》中的最后一段。
+
+
+
+
 
 
 

10-ES6/09-ES6：字符串、数组、对象的扩展.md

@@ -85,7 +85,7 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下：
 
 ## 数组的扩展
 
-> 下面提到的数组的几个方法，更详细的内容，可以看《03-JavaScript基础/17-数组的其他方法.md》。
+> 下面提到的数组的几个方法，更详细的内容，可以看《04-JavaScript基础/17-数组的常见方法.md》。
 
 ### 扩展1：Array.from()
 

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;

17-前端综合/CSS开发总结.md

@@ -0,0 +1,13 @@
+
+### p标签里的文字溢出怎么办
+
+加一个属性即可：
+
+```css
+	word-break: break-all;
+
+```
+
+### inline-block 相关
+
+图片默认是 inline-block 布局，会存在经典的底部 3px 的问题。

17-前端综合/css开发相关.md

@@ -1,10 +0,0 @@
-
-### p标签里的文字溢出怎么办
-
-加一个属性即可：
-
-```css
-	word-break: break-all;
-
-```
-