diff --git a/02-CSS/02-CSS属性.md b/02-CSS/01-CSS属性：字体属性和文本属性.md
similarity index 65%
rename from 02-CSS/02-CSS属性.md
rename to 02-CSS/01-CSS属性：字体属性和文本属性.md
index 90be098..f45cf59 100644
--- a/02-CSS/02-CSS属性.md
+++ b/02-CSS/01-CSS属性：字体属性和文本属性.md
@@ -42,19 +42,139 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略
## 字体属性
-css样式中，常见的字体属性有以下几种：
+### 行高
+
+CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
+
+如下图所示：
+
+
+
+上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。
+
+垂直方向来看，文字在自己的行里是居中的。比如，文字是14px，行高是24px，那么padding就是5px：
+
+
+
+为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。
+
+
+### 如何让单行文本垂直居中
+
+小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。
+
+上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下：
+
+
+
+### font字体属性
+
+css样式中，字体属性有以下几种：
```html
p{
font-size:50px; /*字体大小*/
+ line-height: 30px; /*行高*/
+ font-family:幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
font-style:italic ; /*斜体*/
font-weight:bold; /*粗体：属性值写成bolder也可以*/
- font-family:幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
font-variant:small-caps; /*小写变大写*/
}
```
-另外还有一个`font`属性，它是一个简写属性。指的是：可以将上面的多个属性写在一个声明里面，个人不太喜欢这种写法。
+上面这些属性中，字号、行高、字体这三个属性是最常见的。我们继续看。
+
+**1、字号、行高、字体三大属性：**
+
+（1）字号：
+
+```
+ font-size:14px;
+```
+
+（2）行高：
+
+```
+ line-height:24px;
+```
+
+（3）字体：（font-family就是“字体”，family是“家庭”的意思）
+
+```
+ font-family:"宋体";
+```
+
+上面这三个属性，我们可以使用一行代码来实现：（字号 font-size、行高 line-height、字体 font-family）
+
+```
+ font: 14px/24px “宋体”;
+```
+
+**2、字体属性的说明：**
+
+（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：
+
+```
+ font-family: "华文彩云";
+```
+
+上方代码中，如果用户电脑里面没有这个字体，那么就会变成宋体。
+
+页面中，中文我们只使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要切图。
+
+（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体。如下：（可以备选多个）
+
+```
+ font-family: "微软雅黑","宋体";
+```
+
+上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。
+
+
+（3）我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
+
+```
+ font-family: "Times New Roman","微软雅黑","宋体";
+```
+
+上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为美国人设计的Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于`smyhvae哈哈哈`这段文字，`smyhvae`会采用Times New Roman字体，而`哈哈哈`会采用微软雅黑字体。
+
+可是，如果我们把中文字体写在前面：(错误写法)
+
+```
+ font-family: "微软雅黑","Times New Roman","宋体";
+```
+
+上方代码会导致，中文和英文都会采用微软雅黑字体。
+
+（4）所有的中文字体，都有英语别名。
+
+微软雅黑的英语别名：
+
+```
+ font-family: "Microsoft YaHei";
+```
+
+宋体的英语别名：
+
+```
+ font-family: "SimSun";
+```
+
+于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：
+
+```
+ font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
+```
+
+（5）行高可以用百分比，表示字号的百分之多少。
+
+一般来说，百分比都是大于100%的，因为行高一定要大于字号。
+
+比如说， `font:12px/200% “宋体”`等价于`font:12px/24px “宋体”`。`200%`可以理解成word里面的2倍行高。
+
+反过来， `font:16px/48px “宋体”;`等价于`font:16px/300% “宋体”`。
+
## 文本属性
@@ -72,209 +192,9 @@ CSS样式中，常见的文本属性有以下几种：
-## 背景属性
-
-CSS样式中，常见的背景属性有以下几种：（经常用到，要记住）
-
-- `background-color:#ff99ff;` 设置元素的背景颜色。
-
-- `background-image:url(images/2.gif);` 将图像设置为背景。
-
-- `background-repeat: no-repeat;` 设置背景图片是否重复及如何重复，默认平铺满。（重要）
- - `no-repeat`不要平铺；
- - `repeat-x`横向平铺；
- - `repeat-y`纵向平铺。
-
-- `background-position:center top;` 设置背景图片在当前容器中的位置。
-
-- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。
-属性值可以是：`scroll`（背景图片不动）、`fixed`（背景图片跟着滚动条一起移动）。注意属性值的含义不要搞反了，它的含义是根据滚动条来定义的。
-
-- 另外还有一个简写属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。
-
-上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。
-
-
-### `background-repeat`属性（重要）
-
-`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
-
-- `no-repeat`（不要平铺）
-- `repeat-x`（横向平铺）
-- `repeat-y`（纵向平铺）
-
-
-
-这个属性在开发的时候也是经常用到的。我们通过设置不同的属性值来看一下效果吧：
-
-（1）不加这个属性时：（即默认时）（背景图片会被平铺满）
-
-
-
-PS：padding的区域也是有背景图的。
-
-（2）属性值为`no-repeat`（不要平铺）时：
-
-
-
-（3）属性值为`repeat-x`（横向平铺）时：
-
-
-
-其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。
-
-在搜索引擎上搜“**平铺背景**”，就可以发现，**周期性的图片**可以采用此种方法进行平铺。
-
-（4）属性值为`repeat-y`（纵向平铺）时：
-
-
-
-
-### `background-position`属性
-
-`background-position`属性指的是**背景定位**属性。公式如下：
-
-
-在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。
-
-**1、用像素值描述属性值：**
-
-格式如下：
-
-```
- background-position:向右偏移量 向下偏移量;
-```
-
-属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。
-
-举例如下：
-
-
-
-
-
-
-
-
-**2、用单词描述属性值：**
-
-格式如下：
-
-```
- background-position: 描述左右的词 描述上下的词;
-```
-
-- 描述左右的词：left、center、right
-- 描述上下的词：top 、center、bottom
-
-比如说，`right center`表示将图片放到右边的中间；`center center`表示将图片放到正中间。
-
-位置属性有很多使用场景的。我们来举两个例子。
-
-场景1：（大背景图）
-
-打开“暗黑3 台湾”的官网<https://tw.battle.net/d3/zh/>，可以看到官网的效果是比较炫的：
-
-
-
-
-检查网页后，找到网站背景图片的url：<https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg>。背景图如下：
-
-
-
-实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给body标签加如下属性即可：
-
-```
- body{
- background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg);
- background-repeat: no-repeat;
- background-position: center top;
- }
-```
-
-上方代码中，如果没加`background-position`这个属性，背景图会默认处于浏览器的左上角（显得很丑）；加了此属性之后，图片在水平方向就位于浏览器的中间了。
-
-场景2：（通栏banner）
-
-很多网站的首页都会有banner图（网站最上方的全屏大图叫做「**通栏banner**」），这种图要求横向的宽度特别大。比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示：
-
-
-
-
-
-
-正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下：
-
-```css
- div{
- height: 465px;
- background-image: url(http://img.smyhvae.com/20170813_1053.jpg);
- background-position: center top;
- background-repeat: no-repeat;
- }
-```
-
-上方代码中，我们给div设置height（高度为banner图的高度），不需要设置宽度（让宽度自动霸占整行即可）。效果如下：
-
-
-
-上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。
-
-
-### background-attachment属性
-
-- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
- - `fixed`（背景就会被固定住，不会被滚动条滚走）。
- - `scroll`（与fixed属性相反，默认属性）
-
-`background-attachment:fixed;`的效果如下：
-
-
-
-
-### background综合属性
-
-background属性和border一样，是一个综合属性，可以将多个属性写在一起。(在盒子模型这篇文章中会专门讲border)
-
-举例1:
-
-```
- background:red url(1.jpg) no-repeat 100px 100px fixed;
-```
-
-等价于：
-
-```
- background-color:red;
- background-image:url(1.jpg);
- background-repeat:no-repeat;
- background-position:100px 100px;
- background-attachment:fixed;
-```
-
-以后，我们可以用小属性层叠掉大属性。
-
-上面的属性中，可以任意省略其中的一部分。
-
-比如说，对于下面这样的属性：
-
-```
- background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
-```
-
-效果如下：
-
-
-
-
-PS：以后的CSS3内容中，将学习更多background属性： background-origin、background-clip、background-size（在CSS2.1背景图片是不能调整尺寸，IE9开始兼容）、多背景。
-
-
-
## 列表属性
-
```html
ul li{
list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/
@@ -297,18 +217,9 @@ ul li{
-
## 定位属性(position,float,overflow,z-index)
-> 这一段涉及到**浮动**的知识，我们在[浮动]()这篇文章中会专门讲解。本段只做简单介绍。
-
-在讲之前，有个概念叫顺序流，需要强调一下。
-
-<font color="#0000FF">**顺序流**</font>：所有的标签的初始排列顺序就称为顺序流。
-
-有两种情况会脱离本身的顺序流：
- - 1、控件的位置设置为绝对定位。
- - 2、设置控件的float属性。
+> 这一段涉及到**浮动**的知识，我们在[浮动](https://github.com/smyhvae/Web/blob/master/02-CSS/05-%E6%B5%AE%E5%8A%A8.md)这篇文章中会专门讲解。本段只做简单介绍。
### 1、pisition属性：
@@ -318,7 +229,6 @@ position定位分为绝对定位和相对定位：
- `position:absolute;` <font color="#0000FF">**绝对定位**</font>：定义横纵坐标，原点在父容器的左上角。<font color="#0000FF">**脱离了本身的顺序流**</font>。横坐标用left表示，纵坐标用top表示。
-
绝对定位的举例：
```html
@@ -469,9 +379,6 @@ position定位分为绝对定位和相对定位：
-
-
-
### 5、z-index属性：属性值大的位于上层，属性值小的位于下层
这句话可能比较难理解。我们来看例子吧。
@@ -484,7 +391,6 @@ position定位分为绝对定位和相对定位：
-
## 鼠标的属性cursor
鼠标的属性`cursor`有以下几个属性值：
@@ -558,8 +464,6 @@ p:hover{
爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿···
-
-
## 导航栏的制作（本段内容请忽略）
现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
diff --git a/02-CSS/02-CSS属性：背景属性.md b/02-CSS/02-CSS属性：背景属性.md
new file mode 100644
index 0000000..7928245
--- /dev/null
+++ b/02-CSS/02-CSS属性：背景属性.md
@@ -0,0 +1,311 @@
+
+
+## background系列属性
+
+### 常见背景属性
+
+CSS样式中，常见的背景属性有以下几种：（经常用到，要记住）
+
+- `background-color:#ff99ff;` 设置元素的背景颜色。
+
+- `background-image:url(images/2.gif);` 将图像设置为背景。
+
+- `background-repeat: no-repeat;` 设置背景图片是否重复及如何重复，默认平铺满。（重要）
+ - `no-repeat`不要平铺；
+ - `repeat-x`横向平铺；
+ - `repeat-y`纵向平铺。
+
+- `background-position:center top;` 设置背景图片在当前容器中的位置。
+
+- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。
+属性值可以是：`scroll`（背景图片不动）、`fixed`（背景图片跟着滚动条一起移动）。注意属性值的含义不要搞反了，它的含义是根据滚动条来定义的。
+
+- 另外还有一个简写属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。
+
+上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。
+
+
+### background-color：背景颜色的表示方法
+
+css2.1中，背景颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。
+
+比如红色可以有下面的三种表示方法：
+
+```
+ background-color: red;
+ background-color: rgb(255,0,0);
+ background-color: #ff0000;
+```
+
+下面分别介绍。
+
+**1、用英语单词来表示：**
+
+能够用英语单词来表述的颜色，都是简单颜色。比如红色：
+
+```
+background-color: red;
+```
+
+**2、rgb表示法：**
+
+rgb表示三原色“红”red、“绿”green、“蓝”blue。
+
+光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。
+
+比如红色：
+
+```
+background-color: rgb(255,0,0);
+```
+
+黑色：
+
+```
+background-color: rgb(0,0,0);
+```
+
+颜色可以叠加，比如黄色就是红色和绿色的叠加：
+
+```
+background-color: rgb(255,255,0);
+```
+
+**3、十六进制表示法：**
+
+比如红色：
+
+```
+background-color: #ff0000;
+```
+
+PS:所有用#开头的值，都是16进制的。
+
+这里，我们就要学会16进制与10进制之间的转换。下面举几个例子。
+
+问：16进制中28等于10进制多少？
+答：2*16+8 = 40。
+
+16进制中的af等于10进制多少？
+答：10 * 16 + 15 = 175
+
+所以，#ff0000就等于rgb(255,0,0)。
+
+`background-color: #123456;`等价于`background-color: rgb(18,52,86);`
+
+
+**十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc**。举例如下：
+
+比如：
+
+```
+ background-color:#ff0000;
+```
+
+等价于：
+
+```
+ background-color:#f00;
+```
+
+比如：
+
+```
+ background-color:#112233;
+```
+
+等价于：
+
+```
+ background-color:#123;
+```
+
+但是，比如下面这个是无法简化的：
+
+```
+ background-color:#222333;
+```
+
+再比如，下面这个也是无法简化的：
+
+```
+ background-color:#123123;
+```
+
+几种常见的颜色简写可以记住。如下：
+
+```
+ #000 黑
+ #fff 白
+ #f00 红
+ #222 深灰
+ #333 灰
+ #ccc 浅灰
+```
+
+
+### `background-repeat`属性（重要）
+
+`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
+
+- `no-repeat`（不要平铺）
+- `repeat-x`（横向平铺）
+- `repeat-y`（纵向平铺）
+
+这个属性在开发的时候也是经常用到的。我们通过设置不同的属性值来看一下效果吧：
+
+（1）不加这个属性时：（即默认时）（背景图片会被平铺满）
+
+
+
+PS：padding的区域也是有背景图的。
+
+（2）属性值为`no-repeat`（不要平铺）时：
+
+
+
+（3）属性值为`repeat-x`（横向平铺）时：
+
+
+
+其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。
+
+在搜索引擎上搜“**平铺背景**”，就可以发现，**周期性的图片**可以采用此种方法进行平铺。
+
+（4）属性值为`repeat-y`（纵向平铺）时：
+
+
+
+
+### `background-position`属性
+
+`background-position`属性指的是**背景定位**属性。公式如下：
+
+在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。
+
+**1、用像素值描述属性值：**
+
+格式如下：
+
+```
+ background-position:向右偏移量 向下偏移量;
+```
+
+属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。
+
+举例如下：
+
+
+
+
+
+
+**2、用单词描述属性值：**
+
+格式如下：
+
+```
+ background-position: 描述左右的词 描述上下的词;
+```
+
+- 描述左右的词：left、center、right
+- 描述上下的词：top 、center、bottom
+
+比如说，`right center`表示将图片放到右边的中间；`center center`表示将图片放到正中间。
+
+位置属性有很多使用场景的。我们来举两个例子。
+
+场景1：（大背景图）
+
+打开“暗黑3 台湾”的官网<https://tw.battle.net/d3/zh/>，可以看到官网的效果是比较炫的：
+
+
+
+检查网页后，找到网站背景图片的url：<https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg>。背景图如下：
+
+
+
+实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给body标签加如下属性即可：
+
+```
+ body{
+ background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg);
+ background-repeat: no-repeat;
+ background-position: center top;
+ }
+```
+
+上方代码中，如果没加`background-position`这个属性，背景图会默认处于浏览器的左上角（显得很丑）；加了此属性之后，图片在水平方向就位于浏览器的中间了。
+
+场景2：（通栏banner）
+
+很多网站的首页都会有banner图（网站最上方的全屏大图叫做「**通栏banner**」），这种图要求横向的宽度特别大。比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示：
+
+
+
+正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下：
+
+```css
+ div{
+ height: 465px;
+ background-image: url(http://img.smyhvae.com/20170813_1053.jpg);
+ background-position: center top;
+ background-repeat: no-repeat;
+ }
+```
+
+上方代码中，我们给div设置height（高度为banner图的高度），不需要设置宽度（因为宽度会自动霸占整行）。效果如下：
+
+
+
+上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。
+
+### background-attachment属性
+
+- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
+ - `fixed`（背景就会被固定住，不会被滚动条滚走）。
+ - `scroll`（与fixed属性相反，默认属性）
+
+`background-attachment:fixed;`的效果如下：
+
+
+
+### background综合属性
+
+background属性和border一样，是一个综合属性，可以将多个属性写在一起。(在[盒子模型](http://www.cnblogs.com/smyhvae/p/7256371.html)这篇文章中专门讲到boder)
+
+举例1:
+
+```
+ background:red url(1.jpg) no-repeat 100px 100px fixed;
+```
+
+等价于：
+
+```
+ background-color:red;
+ background-image:url(1.jpg);
+ background-repeat:no-repeat;
+ background-position:100px 100px;
+ background-attachment:fixed;
+```
+
+以后，我们可以用小属性层叠掉大属性。
+
+上面的属性中，可以任意省略其中的一部分。
+
+比如说，对于下面这样的属性：
+
+```
+ background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
+```
+
+效果如下：
+
+
+
+
+PS：以后的CSS3内容中，我们会接触到更多的background属性： background-origin、background-clip、background-size（在CSS2.1背景图片是不能调整尺寸，IE9开始兼容）、多背景。
+
+
+
diff --git a/02-CSS/01-CSS样式表和选择器.md b/02-CSS/03-CSS样式表和选择器.md
similarity index 74%
rename from 02-CSS/01-CSS样式表和选择器.md
rename to 02-CSS/03-CSS样式表和选择器.md
index b2e13ea..38e7e8e 100644
--- a/02-CSS/01-CSS样式表和选择器.md
+++ b/02-CSS/03-CSS样式表和选择器.md
@@ -11,7 +11,7 @@
- CSS概述
- CSS和HTML结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表`
- CSS四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器`
- - CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`、`伪类选择器`
+ - CSS几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`
- CSS样式优先级
@@ -850,363 +850,6 @@ p,h1,#mytitle,.one{
-### 4、伪类选择器（待定）
-
-对于`<a>`标签，其对应几种不同的状态：
-- `link`：超链接点击之前
-- `visited`：超链接点击之后
-- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
-- `hover`：鼠标放到某个标签上的时候
-- `active`：点击某个标签没有松鼠标时
-
-CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：
- - 静态伪类：**只能用于超链接**
- - 动态伪类：针对所有标签都适用
-
-下面来分别讲一下这两种伪类选择器。
-
-**（1）静态伪类：**
-
-用于以下两个状态：
- - `link`：超链接点击之前
- - `visited`：超链接点击之后
-
- > **注意：上面这两个状态只能使用于超链接**。
-
-举例：
-
-```html
- <style type="text/css">
- /*
- 伪类选择器：静态伪类
- */
-
- /*
- 让超链接点击之前是红色
- */
- a:link{
- color:red;
- }
-
- /*
- 让超链接点击之后是绿色
- */
- a:visited{
- color:green;
- }
-
- </style>
-```
-
-效果：
-
-
-
-上图中，超链接点击之前是红色，点击之后是绿色。
-
-
-问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？
-答：
-
-**`a{}`和`a:link{}`的区别：**
-
- - `a{}`定义的样式针对所有的超链接(包括锚点)
- - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
-
-**（2）动态伪类: **
-
-用于以下几种状态：
- - `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
- - `hover`：鼠标放到某个标签上的时候
- - `active`：点击某个标签没有松鼠标时
-
- > 注意：上面这三种状态针适用于所有的标签。
-
-举例：
-
-```html
- <style type="text/css">
- /*
- 伪类选择器：动态伪类
- */
-
- /*
- 让文本框获取焦点时：
- 边框：#FF6F3D这种橙色
- 文字：绿色
- 背景色：#6a6a6a这种灰色
- */
- input:focus{
- border:3px solid #FF6F3D;
- color:white;
- background-color:#6a6a6a;
- }
-
- /*
- 鼠标放在标签上时显示蓝色
- */
- label:hover{
- color:blue;
- }
-
- /*
- 点击标签鼠标没有松开时显示红色
- */
- label:active{
- color:red;
- }
-
- </style>
-```
-
-效果：
-
-
-
-
-利用这个`hover`属性，我们同样对表格做一个样式的设置：
-表格举例：
-
-```html
-<!doctype html>
-<html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="Generator" content="EditPlus®">
- <meta name="Author" content="">
- <meta name="Keywords" content="">
- <meta name="Description" content="">
- <title>Document</title>
- <style type="text/css">
-
- /*整个表格的样式*/
- table{
- width: 300px;
- height: 200px;
- border: 1px solid blue;
- /*border-collapse属性：对表格的线进行折叠*/
- border-collapse: collapse;
- }
-
- /*鼠标悬停时，让当前行显示#868686这种灰色*/
- table tr:hover{
- background: #868686;
- }
-
- /*每个单元格的样式*/
- table td{
- border:1px solid red;
- }
-
- </style>
- </head>
- <body>
-
- <table>
- <tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- <tr>
- <td></td>
- <td></td>
- <td></td>
- <td></td>
- </tr>
- </table>
-
- </body>
-</html>
-```
-
-效果：
-
-
-
-
-
-## 一些 CSS3 选择器
-
-> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。
-
-PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
-
-
-
-### 浏览器的兼容性问题
-
-IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下：
-
-- windows xp 操作系统安装的IE6
-- windows vista 操作系统安装的IE7
-- windows 7 操作系统安装的IE8
-- windows 8 操作系统安装的IE9
-- windows10 操作系统安装的edge
-
-浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。
-
-为了测试浏览器CSS 3的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接：
-
-- <http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/>
-
-测试结果如下：
-
-
-
-
-
-
-
-我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率：
-
-- IE9 5.94%
-- IE8 21.19%
-- IE7 4.79%
-- IE6 4.11%
-
-我们可以在<http://html5test.com/results/desktop.html>中查看
-
-
-
-我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。
-
-我们可以用「IETester」软件看看css在各个浏览器中的显示效果。
-
-
-### 1.儿子选择器，用符号`>`表示
-
-> IE7开始兼容，IE6不兼容。
-
-```css
-div>p{
- color:red;
-}
-```
-
-div的儿子p。和div的后代p的截然不同。
-
-能够选择：
-
-```html
- <div>
- <p>我是div的儿子</p>
- </div>
-```
-
-不能选择：
-
-```html
- <div>
- <ul>
- <li>
- <p>我是div的重孙子</p>
- </li>
- </ul>
- </div>
-```
-
-
-### 2.序选择器
-
-> IE8开始兼容；IE6、7都不兼容
-
-设置无序列表`<ul>`中的第一个`<li>`为红色：
-
-```html
- <style type="text/css">
- ul li:first-child{
- color:red;
- }
- </style>
-```
-
-设置无序列表`<ul>`中的最后一个`<li>`为红色：
-
-```css
- ul li:last-child{
- color:blue;
- }
-```
-
-序选择器还有更复杂的用法，以后再讲。
-
-由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
-
-```html
- <ul>
- <li class="first">项目</li>
- <li>项目</li>
- <li>项目</li>
- <li>项目</li>
- <li>项目</li>
- <li>项目</li>
- <li>项目</li>
- <li>项目</li>
- <li>项目</li>
- <li class="last">项目</li>
- </ul>
-```
-
-用类选择器来选择第一个或者最后一个：
-
-```html
- ul li.first{
- color:red;
- }
-
- ul li.last{
- color:blue;
- }
-```
-
-
-### 3.下一个兄弟选择器
-
-> IE7开始兼容，IE6不兼容。
-
-`+`表示选择下一个兄弟
-
-```html
- <style type="text/css">
- h3+p{
- color:red;
- }
- </style>
-```
-
-上方的选择器意思是：选择的是h3元素后面紧挨着的第一个兄弟。
-
-```html
- <h3>我是一个标题</h3>
- <p>我是一个段落</p>
- <p>我是一个段落</p>
- <p>我是一个段落</p>
- <h3>我是一个标题</h3>
- <p>我是一个段落</p>
- <p>我是一个段落</p>
- <p>我是一个段落</p>
- <h3>我是一个标题</h3>
- <p>我是一个段落</p>
- <p>我是一个段落</p>
- <p>我是一个段落</p>
- <h3>我是一个标题</h3>
-```
-
-
-效果如下：
-
-
-
-
-这种选择器作用不大。
diff --git a/02-CSS/04-CSS选择器：伪类.md b/02-CSS/04-CSS选择器：伪类.md
new file mode 100644
index 0000000..7021f0a
--- /dev/null
+++ b/02-CSS/04-CSS选择器：伪类.md
@@ -0,0 +1,371 @@
+
+
+
+
+### 4、伪类选择器（待定）
+
+对于`<a>`标签，其对应几种不同的状态：
+- `link`：超链接点击之前
+- `visited`：超链接点击之后
+- `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
+- `hover`：鼠标放到某个标签上的时候
+- `active`：点击某个标签没有松鼠标时
+
+CSS允许对于元素的不同状态，定义不同的样式信息。伪类选择器又分为两种：
+ - 静态伪类：**只能用于超链接**
+ - 动态伪类：针对所有标签都适用
+
+下面来分别讲一下这两种伪类选择器。
+
+**（1）静态伪类：**
+
+用于以下两个状态：
+ - `link`：超链接点击之前
+ - `visited`：超链接点击之后
+
+ > **注意：上面这两个状态只能使用于超链接**。
+
+举例：
+
+```html
+ <style type="text/css">
+ /*
+ 伪类选择器：静态伪类
+ */
+
+ /*
+ 让超链接点击之前是红色
+ */
+ a:link{
+ color:red;
+ }
+
+ /*
+ 让超链接点击之后是绿色
+ */
+ a:visited{
+ color:green;
+ }
+
+ </style>
+```
+
+效果：
+
+
+
+上图中，超链接点击之前是红色，点击之后是绿色。
+
+
+问：既然`a{}`定义了超链的属性，和`a:link{}`都定义了超链点击之前的属性，那这两个有啥区别呢？
+答：
+
+**`a{}`和`a:link{}`的区别：**
+
+ - `a{}`定义的样式针对所有的超链接(包括锚点)
+ - `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
+
+**（2）动态伪类: **
+
+用于以下几种状态：
+ - `focus`：是某个标签获得焦点的时候（比如某个输入框获得焦点）
+ - `hover`：鼠标放到某个标签上的时候
+ - `active`：点击某个标签没有松鼠标时
+
+ > 注意：上面这三种状态针适用于所有的标签。
+
+举例：
+
+```html
+ <style type="text/css">
+ /*
+ 伪类选择器：动态伪类
+ */
+
+ /*
+ 让文本框获取焦点时：
+ 边框：#FF6F3D这种橙色
+ 文字：绿色
+ 背景色：#6a6a6a这种灰色
+ */
+ input:focus{
+ border:3px solid #FF6F3D;
+ color:white;
+ background-color:#6a6a6a;
+ }
+
+ /*
+ 鼠标放在标签上时显示蓝色
+ */
+ label:hover{
+ color:blue;
+ }
+
+ /*
+ 点击标签鼠标没有松开时显示红色
+ */
+ label:active{
+ color:red;
+ }
+
+ </style>
+```
+
+效果：
+
+
+
+
+利用这个`hover`属性，我们同样对表格做一个样式的设置：
+表格举例：
+
+```html
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="Generator" content="EditPlus®">
+ <meta name="Author" content="">
+ <meta name="Keywords" content="">
+ <meta name="Description" content="">
+ <title>Document</title>
+ <style type="text/css">
+
+ /*整个表格的样式*/
+ table{
+ width: 300px;
+ height: 200px;
+ border: 1px solid blue;
+ /*border-collapse属性：对表格的线进行折叠*/
+ border-collapse: collapse;
+ }
+
+ /*鼠标悬停时，让当前行显示#868686这种灰色*/
+ table tr:hover{
+ background: #868686;
+ }
+
+ /*每个单元格的样式*/
+ table td{
+ border:1px solid red;
+ }
+
+ </style>
+ </head>
+ <body>
+
+ <table>
+ <tr>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </table>
+
+ </body>
+</html>
+```
+
+效果：
+
+
+
+
+
+
+
+
+
+
+
+## 一些 CSS3 选择器
+
+> 所有的css3选择器，我们放在HTML5和CSS3课上介绍。暂时先接触一部分。
+
+PS：我们可以用`IETester`这个软件测一下CSS在各个版本IE浏览器上的显示效果。
+
+
+
+### 浏览器的兼容性问题
+
+IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下：
+
+- windows xp 操作系统安装的IE6
+- windows vista 操作系统安装的IE7
+- windows 7 操作系统安装的IE8
+- windows 8 操作系统安装的IE9
+- windows10 操作系统安装的edge
+
+浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。
+
+为了测试浏览器CSS 3的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接：
+
+- <http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/>
+
+测试结果如下：
+
+
+
+
+
+
+
+我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率：
+
+- IE9 5.94%
+- IE8 21.19%
+- IE7 4.79%
+- IE6 4.11%
+
+我们可以在<http://html5test.com/results/desktop.html>中查看
+
+
+
+我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。
+
+我们可以用「IETester」软件看看css在各个浏览器中的显示效果。
+
+
+### 1.儿子选择器，用符号`>`表示
+
+> IE7开始兼容，IE6不兼容。
+
+```css
+div>p{
+ color:red;
+}
+```
+
+div的儿子p。和div的后代p的截然不同。
+
+能够选择：
+
+```html
+ <div>
+ <p>我是div的儿子</p>
+ </div>
+```
+
+不能选择：
+
+```html
+ <div>
+ <ul>
+ <li>
+ <p>我是div的重孙子</p>
+ </li>
+ </ul>
+ </div>
+```
+
+
+### 2.序选择器
+
+> IE8开始兼容；IE6、7都不兼容
+
+设置无序列表`<ul>`中的第一个`<li>`为红色：
+
+```html
+ <style type="text/css">
+ ul li:first-child{
+ color:red;
+ }
+ </style>
+```
+
+设置无序列表`<ul>`中的最后一个`<li>`为红色：
+
+```css
+ ul li:last-child{
+ color:blue;
+ }
+```
+
+序选择器还有更复杂的用法，以后再讲。
+
+由于浏览器的更新需要过程，所以现在如果公司还要求兼容IE6、7，那么就要自己写类名：
+
+```html
+ <ul>
+ <li class="first">项目</li>
+ <li>项目</li>
+ <li>项目</li>
+ <li>项目</li>
+ <li>项目</li>
+ <li>项目</li>
+ <li>项目</li>
+ <li>项目</li>
+ <li>项目</li>
+ <li class="last">项目</li>
+ </ul>
+```
+
+用类选择器来选择第一个或者最后一个：
+
+```html
+ ul li.first{
+ color:red;
+ }
+
+ ul li.last{
+ color:blue;
+ }
+```
+
+
+### 3.下一个兄弟选择器
+
+> IE7开始兼容，IE6不兼容。
+
+`+`表示选择下一个兄弟
+
+```html
+ <style type="text/css">
+ h3+p{
+ color:red;
+ }
+ </style>
+```
+
+上方的选择器意思是：选择的是h3元素后面紧挨着的第一个兄弟。
+
+```html
+ <h3>我是一个标题</h3>
+ <p>我是一个段落</p>
+ <p>我是一个段落</p>
+ <p>我是一个段落</p>
+ <h3>我是一个标题</h3>
+ <p>我是一个段落</p>
+ <p>我是一个段落</p>
+ <p>我是一个段落</p>
+ <h3>我是一个标题</h3>
+ <p>我是一个段落</p>
+ <p>我是一个段落</p>
+ <p>我是一个段落</p>
+ <h3>我是一个标题</h3>
+```
+
+
+效果如下：
+
+
+
+
+这种选择器作用不大。
+
+
+### css精灵
+
diff --git a/02-CSS/03-CSS样式表的继承性和层叠性.md b/02-CSS/05-CSS样式表的继承性和层叠性.md
similarity index 100%
rename from 02-CSS/03-CSS样式表的继承性和层叠性.md
rename to 02-CSS/05-CSS样式表的继承性和层叠性.md
diff --git a/02-CSS/06-CSS属性：行高&超链接&background.md b/02-CSS/06-CSS属性：行高&超链接&background.md
deleted file mode 100644
index 31dba16..0000000
--- a/02-CSS/06-CSS属性：行高&超链接&background.md
+++ /dev/null
@@ -1,475 +0,0 @@
-
-
-## 行高和字号
-
-### 行高
-
-CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
-
-
-如下图所示：
-
-20170808_2216.png
-
-上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。
-
-文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么：
-
-20170808_2220.png
-
-为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。
-
-
-### 单行文本垂直居中
-
-小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。
-
-上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要设置盒子的padding。如下：
-
-20170808_2240.png
-
-
-### font字体属性
-
-**1、字号、行高、字体三大属性：**
-
-（1）字号：
-
-```
- font-size:14px;
-```
-
-（2）行高：
-
-```
- line-height:24px;
-```
-
-（3）字体：（font-family就是“字体”，family是“家庭”的意思）
-
-```
- font-family:"宋体";
-```
-
-上面这三个属性，我们可以使用一行代码来实现：（字号 font-size、行高 line-height、字体 font-family）
-
-```
- font: 14px/24px “宋体”;
-```
-
-
-
-**2、字体属性的说明：**
-
-（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：
-
-```
- font-family: "华文彩云";
-```
-
-上方代码中，如果用户电脑里面没有这个字体，那么就会变成宋体。
-
-页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。
-英语：Arial 、 Times New Roman
-
-
-（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体。如下：
-
-```
- font-family: "微软雅黑","宋体";
-```
-
-上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。
-
-备选字体可以有无数个，用逗号隔开。
-
-
-（3）我们要将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
-
-```
- font-family: "Times New Roman","微软雅黑","宋体";
-```
-
-上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为美国人设计的Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于`smyhvae哈哈哈`这段文字，`smyhvae`会采用Times New Roman字体，而`哈哈哈`会采用微软雅黑字体。
-
-可是，如果我们把中文字体写在前面：(错误写法)
-
-```
- font-family: "微软雅黑","Times New Roman","宋体";
-```
-
-上方代码会导致，中文和英文都会采用微软雅黑字体。
-
-
-（4）所有的中文字体，都有英语别名。
-
-微软雅黑的英语别名：
-
-```
- font-family: "Microsoft YaHei";
-```
-
-宋体的英语别名：
-
-```
- font-family: "SimSun";
-```
-
-于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：
-
-```
- font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
-```
-
-
-（5）行高可以用百分比，表示字号的百分之多少。
-
-一般来说，百分比都是大于100%的，因为行高一定要大于字号。
-
-比如说， `font:12px/200% “宋体”`等价于`font:12px/24px “宋体”;`。`200%`可以理解成word里面的2倍行高。
-
-反过来， `font:16px/48px “宋体”;`等价于`font:16px/300% “宋体”`。
-
-
-
-
-## 超级链接的美化
-
-
-> 超级链接就是a标签。
-
-### 伪类
-
-**伪类**：同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”。
-
-类是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户有没有点击、有没有触碰。所以，就叫做“伪类”。
-伪类用冒号来表示。
-
-a标签有4种伪类，要求背诵。如下：
-
-```
- a:link{
- color:red;
- }
- a:visited{
- color:orange;
- }
- a:hover{
- color:green;
- }
- a:active{
- color:black;
- }
-```
-
-上方代码解释如下：
-
-- `:link` 表示“链接”，用户没有点击过这个链接的样式。
-- `:visited` 表示“访问过的”， 用户访问过了这个链接之后的样式。
-- `:hover` 表示“悬停”，用户鼠标悬停的时候链接的样式。
-- `:active` 表示“激活”， 用户用鼠标点击这个链接，但是不松手，此刻的样式。
-
-上面的代码，看一下动图的效果：
-
-
-
-记住，这四种状态，在css中，必须按照固定的顺序写：
-
-> a:**l**ink 、a:visited 、a:hover 、a:active
-
-如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。
-
-
-
-### 超链接的美化
-
-超链接a标签在使用的时候，比较难。因为不仅仅要控制a这个盒子，也要控制它的伪类。
-
-我们一定要将a标签写在前面，将`:link、:visited、:hover、:active`这些伪类写在后面。
-
-举个例子。如果效果：
-
-20170810_2235.gif
-
-为了实现上面这个效果，完整版代码如下：
-
-```html
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-<head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <title>Document</title>
- <style type="text/css">
- *{
- margin: 0;
- padding: 0;
- }
- .nav{
- width: 960px;
- height: 50px;
- border: 1px solid red;
- margin: 100px auto;
- }
- .nav ul{
- /*去掉小圆点*/
- list-style: none;
- }
- .nav ul li{
- float: left;
- width: 120px;
- height: 50px;
- /*让内容水平居中*/
- text-align: center;
- /*让行高等于nav的高度，就可以保证内容垂直居中*/
- line-height: 50px;
- }
- .nav ul li a{
- display: block;
- width: 120px;
- height: 50px;
- }
- /*两个伪类的属性，可以用逗号隔开*/
- .nav ul li a:link , .nav ul li a:visited{
- text-decoration: none;
- background-color: purple;
- color:white;
- }
- .nav ul li a:hover{
- background-color: orange;
- }
- </style>
-</head>
-<body>
- <div class="nav">
- <ul>
- <li><a href="#">网站栏目</a></li>
- <li><a href="#">网站栏目</a></li>
- <li><a href="#">网站栏目</a></li>
- <li><a href="#">网站栏目</a></li>
- <li><a href="#">网站栏目</a></li>
- <li><a href="#">网站栏目</a></li>
- <li><a href="#">网站栏目</a></li>
- <li><a href="#">网站栏目</a></li>
- </ul>
- </div>
-</body>
-</html>
-```
-
-上方代码中，我们发现，当我们在定义`a:link`和 `a:visited`这两个伪类的时候，如果它们的属性相同，我们其实可以写在一起，用逗号隔开就好，摘抄如下：
-
-```css
- .nav ul li a{
- display: block;
- width: 120px;
- height: 50px;
- }
- /*两个伪类的属性，可以用逗号隔开*/
- .nav ul li a:link , .nav ul li a:visited{
- text-decoration: none;
- background-color: purple;
- color:white;
- }
- .nav ul li a:hover{
- background-color: orange;
- }
-```
-
-如上方代码所示，最标准的写法，就是把link、visited、hover这三个伪类都要写。但是前端开发工程师在大量的实践中，发现不写link、visited也挺兼容。写法是：
-
-> a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。写法如下：
-
-
-```css
- .nav ul li a{
- display: block;
- width: 120px;
- height: 50px;
- text-decoration: none;
- background-color: purple;
- color:white;
- }
- .nav ul li a:hover{
- background-color: orange;
- }
-
-```
-
-当然了，在写`a:link`、`a:visited`这两个伪类的时候，要么同时写，要么同时不写。如果只写`a`属性和`a:link`属性，不规范。
-
-
-## background系列属性
-
-### background-color背景颜色属性
-
-css2.1中，背景颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。
-
-比如红色可以有下面的三种表示方法：
-
-```
- background-color: red;
- background-color: rgb(255,0,0);
- background-color: #ff0000;
-```
-
-
-
-下面分别介绍。
-
-**1、用英语单词来表示：**
-
-能够用英语单词来表述的颜色，都是简单颜色。比如红色：
-
-```
-background-color: red;
-```
-
-
-**2、rgb表示法：**
-
-rgb表示三原色“红”red、“绿”green、“蓝”blue。
-
-光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。
-
-比如红色：
-
-```
-background-color: rgb(255,0,0);
-```
-
-黑色：
-
-```
-background-color: rgb(0,0,0);
-```
-
-颜色可以叠加，比如黄色就是红色和绿色的叠加：
-
-```
-background-color: rgb(255,255,0);
-```
-
-
-**3、十六进制表示法：**
-
-比如红色：
-
-```
-background-color: #ff0000;
-```
-
-
-PS:所有用#开头的值，都是16进制的。
-
-这里，我们就要学会16进制与10进制之间的转换。下面举几个例子。
-
-问：16进制中28等于10进制多少？
-答：2*16+8 = 40。
-
-
-16进制中的af等于10进制多少？
-答：10 * 16 + 15 = 175
-
-
-所以，#ff0000就等于rgb(255,0,0)。
-
-`background-color: #123456;`等价于`background-color: rgb(18,52,86);`
-
-
-**十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc**。举例如下：
-
-比如：
-
-```
- background-color:#ff0000;
-```
-
-等价于：
-
-```
- background-color:#f00;
-```
-
-比如：
-
-```
- background-color:#112233;
-```
-
-等价于：
-
-```
- background-color:#123;
-```
-
-但是，比如下面这个是无法简化的：
-
-```
- background-color:#222333;
-```
-
-再比如，下面这个也是无法简化的：
-
-```
- background-color:#123123;
-```
-
-几种常见的颜色简写可以记住。如下：
-
-```
- #000 黑
- #fff 白
- #f00 红
- #222 深灰
- #333 灰
- #ccc 浅灰
-```
-
-
-
-### background-image属性
-
-
-
-
-### background-repeat属性
-
-
-
-### background-position属性
-
-
-
-
-**CSS精灵：**
-
-
-
-###
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/02-CSS/04-盒子模型.md b/02-CSS/06-盒子模型.md
similarity index 100%
rename from 02-CSS/04-盒子模型.md
rename to 02-CSS/06-盒子模型.md
diff --git a/02-CSS/05-浮动.md b/02-CSS/07-浮动.md
similarity index 92%
rename from 02-CSS/05-浮动.md
rename to 02-CSS/07-浮动.md
index 56b133c..fa9358a 100644
--- a/02-CSS/05-浮动.md
+++ b/02-CSS/07-浮动.md
@@ -1,971 +1,975 @@
-
-
-
-> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/7297736.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。
-
-
-
-## 标准文档流
-
-
-宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
-
-
-### 标准文档流的特性
-
-**（1）空白折叠现象：**
-
-无论多少个空格、换行、tab，都会折叠为一个空格。
-
-比如，如果我们想让img标签之间没有空隙，必须紧密连接：
-
-```
-<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
-```
-
-
-**（2）高矮不齐，底边对齐：**
-
-举例如下：
-
-
-
-
-**（3）自动换行，一行写不满，换行写。**
-
-
-### 块级元素和行内元素
-
-学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：
-
-- 行内元素
-- 块级元素
-
-
-我们可以举一个例子，看看块级元素和行内元素的区别：
-
-
-
-
-上图中可以看到，`h1`标签是块级元素，占据了整行，`span`标签是行内元素，只占据内容这一部分。
-
-现在我们尝试给两个标签设置宽高。效果如下：
-
-
-
-上图中，我们尝试给两个标签设置宽高，但发现，宽高属性只对块级元素`h1`生效。于是我们可以做出如下总结。
-
-**行内元素和块级元素的区别：**（非常重要）
-
-行内元素：
-
-- 与其他行内元素并排；
-- 不能设置宽、高。默认的宽度，就是文字的宽度。
-
-块级元素：
-
-- 霸占一行，不能与其他任何元素并列；
-- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
-
-
-
-
-**行内元素和块级元素的分类：**
-
-在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
-
-从HTML的角度来讲，标签分为：
-
-- 文本级标签：p、span、a、b、i、u、em。
-- 容器级标签：div、h系列、li、dt、dd。
-
-> PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
-
-现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
-
-- 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
-
-- 块级元素：所有的容器级标签都是块级元素，还有p标签。
-
-我们把上面的分类画一个图，即可一目了然：
-
-
-
-
-
-### 块级元素和行内元素的相互转换
-
-我们可以通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。
-
-#### 块级元素可以转换为行内元素：
-
-一旦，给一个块级元素（比如div）设置：
-
-```
-display: inline;
-```
-
-那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
-
-- 此时这个div不能设置宽度、高度；
-- 此时这个div可以和别人并排了。
-
-举例如下：
-
-
-
-
-#### 行内元素转换为块级元素：
-
-同样的道理，一旦给一个行内元素（比如span）设置：
-
-```
-display: block;
-```
-
-那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
-
-- 此时这个span能够设置宽度、高度
-- 此时这个span必须霸占一行了，别人无法和他并排
-- 如果不设置宽度，将撑满父亲
-
-举例如下：
-
-
-
-标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！**脱离标准流**！
-
-
-css中一共有三种手段，使一个元素脱离标准文档流：
-
-- （1）浮动
-- （2）绝对定位
-- （3）固定定位
-
-这便引出我们今天要讲的内容：浮动。
-
-
-## 浮动
-
-> 浮动是css里面布局用的最多的属性。
-
-现在有两个div，分别设置宽高。我们知道，它们的效果如下：
-
-
-
-此时，如果给这两个div增加一个浮动属性，比如`float: left;`，效果如下：
-
-
-
-这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。
-
-浮动想学好，一定要知道三个性质。接下来讲一讲。
-
-
-### 性质1：浮动的元素脱标
-
-脱标即脱离标准流。我们来看几个例子。
-
-证明1：
-
-
-
-上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个`<div>`标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个`<div>`还在自己的层面上遵从标准流进行排列。
-
-证明2：
-
-
-
-上图中，一个span标签不需要转成块级元素，就能够设置宽度、高度了。所以能够证明一件事儿，就是所有标签已经不区分行内、块了。也就是说，**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。**
-
-
-### 性质2：浮动的元素互相贴靠
-
-我们来看一个例子就明白了。
-
-我们给三个div均设置了`float: left;`属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：
-
-
-
-
-上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。
-如果没有足够的空间靠着1号大哥，3号自己去贴左墙。
-
-不过3号自己去贴墙的时候，注意：
-
-
-
-
-上图显示，3号贴左墙的时候，并不会往1号里面挤。
-
-同样，float还有一个属性值是`right`，这个和属性值`left`是对称的。
-
-
-### 性质3：浮动的元素有“字围”效果
-
-来看一张图就明白了。我们让div浮动，p不浮动。
-
-
-
-上图中，我们发现：**div挡住了p，但不会挡住p中的文字**，形成“字围”效果。
-
-关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：**永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。**
-
-
-### 性质4：收缩
-
-收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
-
-举例如下：
-
-
-
-
-上图中，div本身是块级元素，如果不设置widh，它会单独霸占整行；但是，设置div浮动后，它会收缩
-
-
-### 浮动的补充（做网站时注意）
-
-
-
-
-上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：
-
-
-
-
-
-### 布置一个作业
-
-布置一个作业，要求实现下面的效果：
-
-
-
-
-为实现上方效果，代码如下：
-
-```html
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
-<head>
- <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
- <title>Document</title>
- <style type="text/css">
- *{
- margin: 0;
- padding: 0;
- }
- .header{
- width: 970px;
- height: 103px;
- /*居中。这个语句的意思是：居中：*/
- margin: 0 auto;
- }
- .header .logo{
- float: left;
- width: 277px;
- height: 103px;
- background-color: red;
- }
- .header .language{
- float: right;
- width: 137px;
- height: 49px;
- background-color: green;
- margin-bottom: 8px;
- }
- .header .nav{
- float: right;
- width: 679px;
- height: 46px;
- background-color: green;
- }
-
- .content{
- width: 970px;
- height: 435px;
- /*居中，这个语句今天没讲，你照抄，就是居中：*/
- margin: 0 auto;
- margin-top: 10px;
- }
- .content .banner{
- float: left;
- width: 310px;
- height: 435px;
- background-color: gold;
- margin-right: 10px;
- }
- .content .rightPart{
- float: left;
- width: 650px;
- height: 435px;
- }
- .content .rightPart .main{
- width: 650px;
- height: 400px;
- margin-bottom: 10px;
- }
- .content .rightPart .links{
- width: 650px;
- height: 25px;
- background-color: blue;
- }
- .content .rightPart .main .news{
- float: left;
- width: 450px;
- height: 400px;
- }
- .content .rightPart .main .hotpic{
- float: left;
- width: 190px;
- height: 400px;
- background-color: purple;
- margin-left: 10px;
- }
- .content .rightPart .main .news .news1{
- width: 450px;
- height: 240px;
- background-color: skyblue;
- margin-bottom: 10px;
- }
- .content .rightPart .main .news .news2{
- width: 450px;
- height: 110px;
- background-color: skyblue;
- margin-bottom: 10px;
- }
- .content .rightPart .main .news .news3{
- width: 450px;
- height: 30px;
- background-color: skyblue;
- }
- .footer{
- width: 970px;
- height: 35px;
- background-color: pink;
- /*没学，就是居中：*/
- margin: 0 auto;
- margin-top: 10px;
- }
- </style>
-</head>
-<body>
- <!-- 头部 -->
- <div class="header">
- <div class="logo">logo</div>
- <div class="language">语言选择</div>
- <div class="nav">导航条</div>
- </div>
-
- <!-- 主要内容 -->
- <div class="content">
- <div class="banner">大广告</div>
- <div class="rightPart">
- <div class="main">
- <div class="news">
- <div class="news1"></div>
- <div class="news2"></div>
- <div class="news3"></div>
- </div>
- <div class="hotpic"></div>
- </div>
- <div class="links"></div>
- </div>
- </div>
-
- <!-- 页尾 -->
- <div class="footer"></div>
-</body>
-</html>
-```
-
-其实，这个页面的布局是下面这个网站：
-
-
-
-
-
-## 浮动的清除
-
-> 这里所说的清除浮动，指的是清除浮动与浮动之间的影响。
-
-### 前言
-
-通过上面这个例子，我们发现，此例中的网页就是通过浮动实现并排的。
-
-比如说一个网页有header、content、footer这三部分。就拿content部分来举例，如果设置content的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里。
-
-从学习浮动的第一天起，我们就要明白，浮动有开始，就要有清除。我们先来做个实验。
-
-下面这个例子，有两个块级元素div，div没有任何属性，每个div里有li，效果如下：
-
-
-
-
-上面这个例子很简单。可如果我们给里面的`<li>`标签加浮动。效果却成了下面这个样子：
-
-代码如下：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Document</title>
- <style type="text/css">
- *{
-
- }
- li{
- float: left;
- width: 100px;
- height: 20px;
- background-color: pink;
-
-
- }
- </style>
-</head>
-<body>
- <div class="box1">
- <ul>
- <li>生命壹号1</li>
- <li>生命壹号2</li>
- <li>生命壹号3</li>
- <li>生命壹号4</li>
- </ul>
- </div>
- <div class="box2">
- <ul>
- <li>许嵩1</li>
- <li>许嵩2</li>
- <li>许嵩3</li>
- <li>许嵩4</li>
- </ul>
- </div>
-</body>
-</html>
-```
-
-效果如下：
-
-
-
-
-上图中，我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。
-
-这便引出我们要讲的：清除浮动的第一种方式。
-那该怎么解决呢？
-
-
-### 方法1：给浮动元素的祖先元素加高度
-
-
-
-造成前言中这个现象的根本原因是：li的**父亲div没有设置高度**，导致这两个div的高度均为0px（我们可以通过网页的审查元素进行查看）。div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。
-
-撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。
-
-好，现在就算给这个div设置高度，可如果div自己的高度小于孩子的高度，也会出现不正常的现象：
-
-
-
-
-给div设置一个正确的合适的高度（至少保证高度大于儿子的高度），就可以看到正确的现象：
-
-
-
-**总结：**
-
-**如果一个元素要浮动，那么它的祖先元素一定要有高度。**
-
-**有高度的盒子，才能关住浮动**。（记住这句过来人的经验之语）
-
-只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
-
-
-
-
-
-
-### 方法2：clear:both;
-
-网页制作中，高度height其实很少出现。为什么？因为能被内容撑高！也就是说，刚刚我们讲解的方法1，工作中用得很少。
-
-那么，能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？
-
-这个时候，我们可以使用`clear:both;`这个属性。如下：
-
-
-
-
-```
-clear:both;
-```
-
-clear就是清除，both指的是左浮动、右浮动都要清除。意思就是：清除别人对我的影响。
-
-这种方法有一个非常大的、致命的问题，**它所在的标签，margin属性失效了**。读者可以试试看。
-
-
-margin失效的本质原因是：上图中的box1和box2，高度为零。
-
-
-
-### 方法3：隔墙法
-
-上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置`clear: both;`属性。既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。
-
-
-我们看看例子效果就知道了：
-
-
-
-上图这个例子就是隔墙法。
-
-
-**内墙法：**
-
-
-近些年，有演化出了“内墙法”：
-
-
-
-上面这个图非常重要，当作内墙法的公式，先记下来。
-
-
-为了讲内墙法，我们先记住一句重要的话：**一个父亲是不能被浮动的儿子撑出高度的**。举例如下：
-
-（1）我们在一个div里放一个有宽高的p，效果如下：（很简单）
-
-
-
-（2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了：
-
-
-
-（3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度：
-
-
-
-于是，我们采用内墙法解决前言中的问题：
-
-
-
-与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。
-
-而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content。
-
-
-### 清除浮动方法4：overflow:hidden;
-
-我们可以使用如下属性：
-
-```
-overflow:hidden;
-```
-
-
-overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。如下：
-
-
-
-
-上图显示，`overflow:hidden;`的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下：
-
-一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上`overflow:hidden`; 那么，父亲就能被儿子撑出高了。这是一个偏方。
-
-举个例子：
-
-
-
-
-那么对于前言中的例子，我们同样可以使用这一属性：
-
-
-
-
-
-
-## 浮动清除的总结
-
-
-> 我们在上一段讲了四种清除浮动的方法，本段来进行一个总结。
-
-浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。
-
-### 1、加高法
-
-工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。
-
-```html
-<div> //设置height
- <p></p>
- <p></p>
- <p></p>
-</div>
-
-<div> //设置height
- <p></p>
- <p></p>
- <p></p>
-</div>
-```
-
-
-### 2、`clear:both;`法
-
-最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。
-
-
-```html
-<div>
- <p></p>
- <p></p>
- <p></p>
-</div>
-
-<div> //clear:both;
- <p></p>
- <p></p>
- <p></p>
-</div>
-```
-
-浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。
-
-
-
-### 3、隔墙法
-
-在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
-墙用自己的身体当做了间隙。
-
-```html
-<div>
- <p></p>
- <p></p>
- <p></p>
-</div>
-
-<div class="cl h10"></div>
-
-<div>
- <p></p>
- <p></p>
- <p></p>
-</div>
-```
-
-我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。
-
-内墙法：
-
-```html
-<div>
- <p></p>
- <p></p>
- <p></p>
- <div class="cl h10"></div>
-</div>
-
-<div>
- <p></p>
- <p></p>
- <p></p>
-</div>
-```
-
-内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
-
-
-### 4、`overflow:hidden;`
-
-这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
-我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。
-并且,overflow:hidden;能够让margin生效。
-
-
-**清除浮动的例子：**
-
-我们现在举个例子，要求实现下图中无序列表部分的效果：
-
-
-
-对比一下我们讲的四种清除浮动的方法。如果用外墙法，ul中不能插入div标签，因为ul中只能插入li，如果插入li的墙，会浪费语义。如果用内墙法，不美观。综合对比，还是用第四种方法来实现吧，这会让标签显得极其干净整洁：
-
-
-
-上方代码中，如果没有加`overflow:hidden;`，那么第二行的li会紧跟着第一行li的后面。
-
-
-## 浏览器的兼容性问题
-
-
-
-> 讲一下上述知识点涉及到的浏览器兼容问题。
-
-
-### 兼容性1（微型盒子）
-
-**兼容性的第一条**：IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大。即：IE 6不支持微型盒子。
-
-举个例子。我们设置一个height为 5px 、宽度为 200px的盒子，看下在IE 8和 IE 6中的显示效果：
-
-
-
-解决办法很简单，就是将盒子的字号大小，设置为**小于盒子的高**，比如，如果盒子的高为5px，那就把font-size设置为0px(0px < 5px)。如下：
-
-```
-height: 5px;
-_font-size: 0px;
-```
-
-我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
-
-
-IE6留了一个**后门**：只要给css属性之前，加上**下划线**，这个属性就是IE6的专有属性。
-
-
-比如说，我们给背景颜色这个属性加上下划线，就变成了`_background-color: green;`。效果如下：
-
-
-
-
-
-于是乎，为了解决微型盒子（即height小于12px）的问题，正确写法：（注意不要忘记下划线）
-
-```
-height: 10px;
-_font-size:0;
-```
-
-
-
-### 兼容性2
-
-**兼容性的第二条：**IE6不支持用`overflow:hidden;`来清除浮动。
-
-解决办法，以毒攻毒。追加一条：
-
-```
-_zoom:1;
-```
-
-完整写法：
-
-```
-overflow: hidden;
-_zoom:1;
-```
-
-实际上，`_zoom:1;`能够触发浏览器hasLayout机制。这个机制，不要深究了，因为只有IE6有。我们只需要让IE6好用，具体的实现机制，可以自行查阅。
-
-需要强调的是，`overflow:hidden;`的本意，就是让溢出盒子的border的内容隐藏，这个功能是IE6兼容的。不兼容的是`overflow:hidden;`清除浮动的时候。
-
-
-**总结：**
-
-我们刚才学习的两个IE6的兼容问题，都是通过多写一条hack来解决的，这个我们称为伴生属性，即两个属性，要写一起写。
-
-属性1：
-
-```
-height:6px;
-_font-size:0;
-```
-
-属性2：
-
-```
-overflow:hidden;
-_zoom:1;
-```
-
-
-## margin相关
-
-> 我们来讲一下浮动中和margin相关的知识。
-
-
-### margin塌陷
-
-**标准文档流中，竖直方向的margin不叠加，以较大的为准**(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
-
-
-
-
-
-如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。
-
-
-
-### 盒子居中`margin:0 auto;`
-
-margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了：
-
-```
-margin-left: auto;
-margin-right: auto;
-```
-
-盒子居中的简写为：
-
-```
-margin:0 auto;
-```
-
-对上方代码的理解：上下的margin为0，左右的margin都尽可能的大，于是就居中了。
-
-注意：
-
-- （1）使用`margin:0 auto;`的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义）
-- （2）只有标准流的盒子，才能使用`margin:0 auto;`居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
-- （3）`margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;`
-
-对上面的第三条总结一下：（非常重要）
-
-```
-margin:0 auto; //让这个div自己在大容器中居中。
-text-align: center; //让这个div内部的文本居中。
-```
-
-顺便普及一下知识，text-align还有：
-
-```
-text-align:left; //没啥用，因为默认居左
-text-align:right; //文本居右
-```
-
-### 善于使用父亲的padding，而不是儿子的margin
-
-我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p）
-
-```
- <div>
- <p></p>
- </div>
-```
-
-上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持30px的上边距。结果却看到了下面的奇怪的现象：
-
-
-
-
-此时我们给父亲div加一个border属性，就正常了：
-
-
-
-
-
-如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。
-
-**margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。**
-
-所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
-
-
-## 关于margin的IE6兼容问题
-
-
-### IE6的双倍margin的bug：
-
-当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign。
-
-```
- <ul>
- <li></li>
- <li></li>
- <li></li>
- </ul>
-```
-
-
-
-
-
-解决方案：
-
-（1）使浮动的方向和margin的方向，相反。
-
-所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。
-
-```
- float: left;
- margin-right: 40px;
-```
-
-
-
-（2）使用hack：（没必要，别惯着这个IE6）
-
-单独给队首的元素，写一个一半的margin：
-
-```
-<li class="no1"></li>
-```
-
-```
-ul li.no1{
- _margin-left:20px;
-}
-```
-
-PS：双倍margin的问题，面试经常问哦。
-
-
-
-### IE6的3px bug
-
-
-
-解决办法：不用管，因为根本就不允许用儿子踹父亲（即描述父子之间的距离，请用padding，而不是margin）。所以，如果你出现了3px bug，说明你的代码不标准。
-
-
-IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲IE6的兼容性问题，就是为了增加面试的成功率，不是为了成为IE6的专家。
-
-
-
-## Fireworks和others
-
-### Fireworks
-
-fireworks是Adobe公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks的默认文件格式是png。
-
-标尺的快捷键：Ctrl + Alt+ R
-
-
-### others
-
-
-
-首行缩进两个汉字：
-
-```
-text-indent: 2em;
-```
-
-上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。
-
-
-
-
-第四天：定位
-
-第五天：背景、表格
-
-第六天：切图
-
-
-
-
-## 我的公众号
-
-想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
-
-扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
-
-
-
-
-
+
+
+
+> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/7297736.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。
+
+
+
+
+## 文本主要内容
+
+- 标准文档流
+ - 标准文档流的特性
+ - 行内元素和块级元素
+ - 行内元素和块级元素的相互转换
+- 浮动的性质
+- 浮动的清除
+- 浏览器的兼容性问题
+- 浮动中margin相关
+- 关于margin的IE6兼容问题
+
+## 标准文档流
+
+
+宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：web页面的制作，是个“流”，必须从上而下，像“织毛衣”。而设计软件，想往哪里画个东西，都能画。
+
+
+### 标准文档流的特性
+
+**（1）空白折叠现象：**
+
+无论多少个空格、换行、tab，都会折叠为一个空格。
+
+比如，如果我们想让img标签之间没有空隙，必须紧密连接：
+
+```
+<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
+```
+
+
+**（2）高矮不齐，底边对齐：**
+
+举例如下：
+
+
+
+
+**（3）自动换行，一行写不满，换行写。**
+
+
+### 行内元素和块级元素
+
+学习的初期，我们就要知道，标准文档流等级森严。标签分为两种等级：
+
+- 行内元素
+- 块级元素
+
+
+我们可以举一个例子，看看块级元素和行内元素的区别：
+
+
+
+
+上图中可以看到，`h1`标签是块级元素，占据了整行，`span`标签是行内元素，只占据内容这一部分。
+
+现在我们尝试给两个标签设置宽高。效果如下：
+
+
+
+上图中，我们尝试给两个标签设置宽高，但发现，宽高属性只对块级元素`h1`生效。于是我们可以做出如下总结。
+
+**行内元素和块级元素的区别：**（非常重要）
+
+行内元素：
+
+- 与其他行内元素并排；
+- 不能设置宽、高。默认的宽度，就是文字的宽度。
+
+块级元素：
+
+- 霸占一行，不能与其他任何元素并列；
+- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
+
+
+
+
+**行内元素和块级元素的分类：**
+
+在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
+
+从HTML的角度来讲，标签分为：
+
+- 文本级标签：p、span、a、b、i、u、em。
+- 容器级标签：div、h系列、li、dt、dd。
+
+> PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
+
+现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
+
+- 行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
+
+- 块级元素：所有的容器级标签都是块级元素，还有p标签。
+
+我们把上面的分类画一个图，即可一目了然：
+
+
+
+
+
+### 行内元素和块级元素的相互转换
+
+我们可以通过`display`属性将块级元素和行内元素进行相互转换。display即“显示模式”。
+
+#### 块级元素可以转换为行内元素：
+
+一旦，给一个块级元素（比如div）设置：
+
+```
+display: inline;
+```
+
+那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：
+
+- 此时这个div不能设置宽度、高度；
+- 此时这个div可以和别人并排了。
+
+举例如下：
+
+
+
+
+#### 行内元素转换为块级元素：
+
+同样的道理，一旦给一个行内元素（比如span）设置：
+
+```
+display: block;
+```
+
+那么，这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思。也就是说：
+
+- 此时这个span能够设置宽度、高度
+- 此时这个span必须霸占一行了，别人无法和他并排
+- 如果不设置宽度，将撑满父亲
+
+举例如下：
+
+
+
+标准流里面的限制非常多，导致很多页面效果无法实现。如果我们现在就要并排、并且就要设置宽高，那该怎么办呢？办法是：移民！**脱离标准流**！
+
+
+css中一共有三种手段，使一个元素脱离标准文档流：
+
+- （1）浮动
+- （2）绝对定位
+- （3）固定定位
+
+这便引出我们今天要讲的内容：浮动。
+
+
+## 浮动的性质
+
+> 浮动是css里面布局用的最多的属性。
+
+现在有两个div，分别设置宽高。我们知道，它们的效果如下：
+
+
+
+此时，如果给这两个div增加一个浮动属性，比如`float: left;`，效果如下：
+
+
+
+这就达到了浮动的效果。此时，两个元素并排了，并且两个元素都能够设置宽度、高度了（这在上一段的标准流中，不能实现）。
+
+浮动想学好，一定要知道三个性质。接下来讲一讲。
+
+### 性质1：浮动的元素脱标
+
+脱标即脱离标准流。我们来看几个例子。
+
+证明1：
+
+
+
+上图中，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的第一个`<div>`标签出现了浮动，于是这个标签在另外一个层面上进行排列。而第二个`<div>`还在自己的层面上遵从标准流进行排列。
+
+证明2：
+
+
+
+上图中，span标签在标准流中，是不能设置宽高的（因为是行内元素）。但是，一旦设置为浮动之后，即使不转成块级元素，也能够设置宽高了。
+
+所以能够证明一件事：**一旦一个元素浮动了，那么，将能够并排了，并且能够设置宽高了。无论它原来是个div还是个span。**所有标签，浮动之后，已经不区分行内、块级了。
+
+
+### 性质2：浮动的元素互相贴靠
+
+我们来看一个例子就明白了。
+
+我们给三个div均设置了`float: left;`属性之后，然后设置宽高。当改变浏览器窗口大小时，可以看到div的贴靠效果：
+
+
+
+
+上图显示，3号如果有足够空间，那么就会靠着2号。如果没有足够的空间，那么会靠着1号大哥。
+如果没有足够的空间靠着1号大哥，3号自己去贴左墙。
+
+不过3号自己去贴墙的时候，注意：
+
+
+
+
+上图显示，3号贴左墙的时候，并不会往1号里面挤。
+
+同样，float还有一个属性值是`right`，这个和属性值`left`是对称的。
+
+
+### 性质3：浮动的元素有“字围”效果
+
+来看一张图就明白了。我们让div浮动，p不浮动。
+
+
+
+上图中，我们发现：**div挡住了p，但不会挡住p中的文字**，形成“字围”效果。
+
+关于浮动我们要强调一点，浮动这个东西，为避免混乱，我们在初期一定要遵循一个原则：**永远不是一个东西单独浮动，浮动都是一起浮动，要浮动，大家都浮动。**
+
+
+### 性质4：收缩
+
+收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
+
+举例如下：
+
+
+
+
+上图中，div本身是块级元素，如果不设置widh，它会单独霸占整行；但是，设置div浮动后，它会收缩
+
+
+### 浮动的补充（做网站时注意）
+
+
+
+
+上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：
+
+
+
+
+
+### 布置一个作业
+
+布置一个作业，要求实现下面的效果：
+
+
+
+
+为实现上方效果，代码如下：
+
+```html
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
+<head>
+ <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+ <title>Document</title>
+ <style type="text/css">
+ *{
+ margin: 0;
+ padding: 0;
+ }
+ .header{
+ width: 970px;
+ height: 103px;
+ /*居中。这个语句的意思是：居中：*/
+ margin: 0 auto;
+ }
+ .header .logo{
+ float: left;
+ width: 277px;
+ height: 103px;
+ background-color: red;
+ }
+ .header .language{
+ float: right;
+ width: 137px;
+ height: 49px;
+ background-color: green;
+ margin-bottom: 8px;
+ }
+ .header .nav{
+ float: right;
+ width: 679px;
+ height: 46px;
+ background-color: green;
+ }
+
+ .content{
+ width: 970px;
+ height: 435px;
+ /*居中，这个语句今天没讲，你照抄，就是居中：*/
+ margin: 0 auto;
+ margin-top: 10px;
+ }
+ .content .banner{
+ float: left;
+ width: 310px;
+ height: 435px;
+ background-color: gold;
+ margin-right: 10px;
+ }
+ .content .rightPart{
+ float: left;
+ width: 650px;
+ height: 435px;
+ }
+ .content .rightPart .main{
+ width: 650px;
+ height: 400px;
+ margin-bottom: 10px;
+ }
+ .content .rightPart .links{
+ width: 650px;
+ height: 25px;
+ background-color: blue;
+ }
+ .content .rightPart .main .news{
+ float: left;
+ width: 450px;
+ height: 400px;
+ }
+ .content .rightPart .main .hotpic{
+ float: left;
+ width: 190px;
+ height: 400px;
+ background-color: purple;
+ margin-left: 10px;
+ }
+ .content .rightPart .main .news .news1{
+ width: 450px;
+ height: 240px;
+ background-color: skyblue;
+ margin-bottom: 10px;
+ }
+ .content .rightPart .main .news .news2{
+ width: 450px;
+ height: 110px;
+ background-color: skyblue;
+ margin-bottom: 10px;
+ }
+ .content .rightPart .main .news .news3{
+ width: 450px;
+ height: 30px;
+ background-color: skyblue;
+ }
+ .footer{
+ width: 970px;
+ height: 35px;
+ background-color: pink;
+ /*没学，就是居中：*/
+ margin: 0 auto;
+ margin-top: 10px;
+ }
+ </style>
+</head>
+<body>
+ <!-- 头部 -->
+ <div class="header">
+ <div class="logo">logo</div>
+ <div class="language">语言选择</div>
+ <div class="nav">导航条</div>
+ </div>
+
+ <!-- 主要内容 -->
+ <div class="content">
+ <div class="banner">大广告</div>
+ <div class="rightPart">
+ <div class="main">
+ <div class="news">
+ <div class="news1"></div>
+ <div class="news2"></div>
+ <div class="news3"></div>
+ </div>
+ <div class="hotpic"></div>
+ </div>
+ <div class="links"></div>
+ </div>
+ </div>
+
+ <!-- 页尾 -->
+ <div class="footer"></div>
+</body>
+</html>
+```
+
+其实，这个页面的布局是下面这个网站：
+
+
+
+
+
+## 浮动的清除
+
+> 这里所说的清除浮动，指的是清除浮动与浮动之间的影响。
+
+### 前言
+
+通过上面这个例子，我们发现，此例中的网页就是通过浮动实现并排的。
+
+比如说一个网页有header、content、footer这三部分。就拿content部分来举例，如果设置content的儿子为浮动，但是，这个儿子又是一个全新的标准流，于是儿子的儿子仍然在标准流里。
+
+从学习浮动的第一天起，我们就要明白，浮动有开始，就要有清除。我们先来做个实验。
+
+下面这个例子，有两个块级元素div，div没有任何属性，每个div里有li，效果如下：
+
+
+
+
+上面这个例子很简单。可如果我们给里面的`<li>`标签加浮动。效果却成了下面这个样子：
+
+代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <title>Document</title>
+ <style type="text/css">
+ *{
+
+ }
+ li{
+ float: left;
+ width: 100px;
+ height: 20px;
+ background-color: pink;
+
+
+ }
+ </style>
+</head>
+<body>
+ <div class="box1">
+ <ul>
+ <li>生命壹号1</li>
+ <li>生命壹号2</li>
+ <li>生命壹号3</li>
+ <li>生命壹号4</li>
+ </ul>
+ </div>
+ <div class="box2">
+ <ul>
+ <li>许嵩1</li>
+ <li>许嵩2</li>
+ <li>许嵩3</li>
+ <li>许嵩4</li>
+ </ul>
+ </div>
+</body>
+</html>
+```
+
+效果如下：
+
+
+
+
+上图中，我们发现：第二组中的第1个li，去贴靠第一组中的最后一个li了（我们本以为这些li会分成两排）。
+
+这便引出我们要讲的：清除浮动的第一种方式。
+那该怎么解决呢？
+
+
+### 方法1：给浮动元素的祖先元素加高度
+
+
+
+造成前言中这个现象的根本原因是：li的**父亲div没有设置高度**，导致这两个div的高度均为0px（我们可以通过网页的审查元素进行查看）。div的高度为零，导致不能给自己浮动的孩子，撑起一个容器。
+
+撑不起一个容器，导致自己的孩子没办法在自己的内部进行正确的浮动。
+
+好，现在就算给这个div设置高度，可如果div自己的高度小于孩子的高度，也会出现不正常的现象：
+
+
+
+
+给div设置一个正确的合适的高度（至少保证高度大于儿子的高度），就可以看到正确的现象：
+
+
+
+**总结：**
+
+**如果一个元素要浮动，那么它的祖先元素一定要有高度。**
+
+**有高度的盒子，才能关住浮动**。（记住这句过来人的经验之语）
+
+只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。
+
+
+
+
+
+
+### 方法2：clear:both;
+
+网页制作中，高度height其实很少出现。为什么？因为能被内容撑高！也就是说，刚刚我们讲解的方法1，工作中用得很少。
+
+那么，能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？
+
+这个时候，我们可以使用`clear:both;`这个属性。如下：
+
+
+
+
+```
+clear:both;
+```
+
+clear就是清除，both指的是左浮动、右浮动都要清除。`clear:both`的意思就是：**不允许左侧和右侧有浮动对象。**
+
+这种方法有一个非常大的、致命的问题，**它所在的标签，margin属性失效了**。读者可以试试看。
+
+
+margin失效的本质原因是：上图中的box1和box2，高度为零。
+
+
+
+### 方法3：隔墙法
+
+上面这个例子中，为了防止第二个div贴靠到第二个div，我们可以在这两个div中间用一个新的div隔开，然后给这个新的div设置`clear: both;`属性；同时，既然这个新的div无法设置margin属性，我们可以给它设置height，以达到margin的效果（曲线救国）。这便是隔墙法。
+
+
+我们看看例子效果就知道了：
+
+
+
+上图这个例子就是隔墙法。
+
+
+**内墙法：**
+
+
+近些年，有演化出了“内墙法”：
+
+
+
+上面这个图非常重要，当作内墙法的公式，先记下来。
+
+
+为了讲内墙法，我们先记住一句重要的话：**一个父亲是不能被浮动的儿子撑出高度的**。举例如下：
+
+（1）我们在一个div里放一个有宽高的p，效果如下：（很简单）
+
+
+
+（2）可如果在此基础之上，给p设置浮动，却发现父亲div没有高度了：
+
+
+
+（3）此时，我么可以在div的里面放一个div（作为内墙），就可以让父亲div恢复高度：
+
+
+
+于是，我们采用内墙法解决前言中的问题：
+
+
+
+与外墙法相比，内墙法的优势（本质区别）在于：内墙法可以给它所在的家撑出宽度（让box1有高）。即：box1的高度可以自适应内容。
+
+而外墙法，虽然一道墙可以把两个div隔开，但是这两个div没有高，也就是说，无法wrap_content。
+
+
+### 清除浮动方法4：overflow:hidden;
+
+我们可以使用如下属性：
+
+```
+overflow:hidden;
+```
+
+
+overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“溢出隐藏”。顾名思义：所有溢出边框的内容，都要隐藏掉。如下：
+
+
+
+
+上图显示，`overflow:hidden;`的本意是清除溢出到盒子外面的文字。但是，前端开发工程师发现了，它能做偏方。如下：
+
+一个父亲不能被自己浮动的儿子，撑出高度。但是，只要给父亲加上`overflow:hidden`; 那么，父亲就能被儿子撑出高了。这是一个偏方。
+
+举个例子：
+
+
+
+
+那么对于前言中的例子，我们同样可以使用这一属性：
+
+
+
+
+
+
+## 浮动清除的总结
+
+
+> 我们在上一段讲了四种清除浮动的方法，本段来进行一个总结。
+
+浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。
+
+### 1、加高法
+
+工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。
+
+```html
+<div> //设置height
+ <p></p>
+ <p></p>
+ <p></p>
+</div>
+
+<div> //设置height
+ <p></p>
+ <p></p>
+ <p></p>
+</div>
+```
+
+
+### 2、`clear:both;`法
+
+最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。
+
+
+```html
+<div>
+ <p></p>
+ <p></p>
+ <p></p>
+</div>
+
+<div> //clear:both;
+ <p></p>
+ <p></p>
+ <p></p>
+</div>
+```
+
+浮动确实被清除了，不会互相影响了。但是有一个问题，就是margin失效。两个div之间，没有任何的间隙了。
+
+
+
+### 3、隔墙法
+
+在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
+墙用自己的身体当做了间隙。
+
+```html
+<div>
+ <p></p>
+ <p></p>
+ <p></p>
+</div>
+
+<div class="cl h10"></div>
+
+<div>
+ <p></p>
+ <p></p>
+ <p></p>
+</div>
+```
+
+我们发现，隔墙法好用，但是第一个div，还是没有高度。如果我们现在想让第一个div，自动根据自己的儿子撑出高度，我们就要想一些“小伎俩”。
+
+内墙法：
+
+```html
+<div>
+ <p></p>
+ <p></p>
+ <p></p>
+ <div class="cl h10"></div>
+</div>
+
+<div>
+ <p></p>
+ <p></p>
+ <p></p>
+</div>
+```
+
+内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了。
+
+
+### 4、`overflow:hidden;`
+
+这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。
+我们知道，一个父亲，不能被自己浮动的儿子撑出高度，但是，如果这个父亲加上了overflow:hidden；那么这个父亲就能够被浮动的儿子撑出高度了。这个现象，不能解释，就是浏览器的偏方。
+并且,overflow:hidden;能够让margin生效。
+
+
+**清除浮动的例子：**
+
+我们现在举个例子，要求实现下图中无序列表部分的效果：
+
+
+
+对比一下我们讲的四种清除浮动的方法。如果用外墙法，ul中不能插入div标签，因为ul中只能插入li，如果插入li的墙，会浪费语义。如果用内墙法，不美观。综合对比，还是用第四种方法来实现吧，这会让标签显得极其干净整洁：
+
+
+
+上方代码中，如果没有加`overflow:hidden;`，那么第二行的li会紧跟着第一行li的后面。
+
+
+## 浏览器的兼容性问题
+
+
+
+> 讲一下上述知识点涉及到的浏览器兼容问题。
+
+
+### 兼容性1（微型盒子）
+
+**兼容性的第一条**：IE6不支持小于12px的盒子，任何小于12px的盒子，在IE6中看都大。即：IE 6不支持微型盒子。
+
+举个例子。我们设置一个height为 5px 、宽度为 200px的盒子，看下在IE 8和 IE 6中的显示效果：
+
+
+
+解决办法很简单，就是将盒子的字号大小，设置为**小于盒子的高**，比如，如果盒子的高为5px，那就把font-size设置为0px(0px < 5px)。如下：
+
+```
+height: 5px;
+_font-size: 0px;
+```
+
+我们现在介绍一下浏览器hack。hack就是“黑客”，就是使用浏览器提供的后门，针对某一种浏览器做兼容。
+
+
+IE6留了一个**后门**：只要给css属性之前，加上**下划线**，这个属性就是IE6的专有属性。
+
+
+比如说，我们给背景颜色这个属性加上下划线，就变成了`_background-color: green;`。效果如下：
+
+
+
+
+
+于是乎，为了解决微型盒子（即height小于12px）的问题，正确写法：（注意不要忘记下划线）
+
+```
+height: 10px;
+_font-size:0;
+```
+
+
+
+### 兼容性2
+
+**兼容性的第二条：**IE6不支持用`overflow:hidden;`来清除浮动。
+
+解决办法，以毒攻毒。追加一条：
+
+```
+_zoom:1;
+```
+
+完整写法：
+
+```
+overflow: hidden;
+_zoom:1;
+```
+
+实际上，`_zoom:1;`能够触发浏览器hasLayout机制。这个机制，不要深究了，因为只有IE6有。我们只需要让IE6好用，具体的实现机制，可以自行查阅。
+
+需要强调的是，`overflow:hidden;`的本意，就是让溢出盒子的border的内容隐藏，这个功能是IE6兼容的。不兼容的是`overflow:hidden;`清除浮动的时候。
+
+
+**总结：**
+
+我们刚才学习的两个IE6的兼容问题，都是通过多写一条hack来解决的，这个我们称为伴生属性，即两个属性，要写一起写。
+
+属性1：
+
+```
+height:6px;
+_font-size:0;
+```
+
+属性2：
+
+```
+overflow:hidden;
+_zoom:1;
+```
+
+
+## margin相关
+
+> 我们来讲一下浮动中和margin相关的知识。
+
+
+### margin塌陷
+
+**标准文档流中，竖直方向的margin不叠加，以较大的为准**(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
+
+
+
+
+
+如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有塌陷现象的。
+
+
+
+### 盒子居中`margin:0 auto;`
+
+margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了：
+
+```
+margin-left: auto;
+margin-right: auto;
+```
+
+盒子居中的简写为：
+
+```
+margin:0 auto;
+```
+
+对上方代码的理解：上下的margin为0，左右的margin都尽可能的大，于是就居中了。
+
+注意：
+
+- （1）只有标准流的盒子，才能使用`margin:0 auto;`居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
+- （2）使用`margin:0 auto;`的盒子，必须有width，有明确的width。（可以这样理解，如果没有明确的witdh，那么它的witdh就是霸占整行，没有意义）
+- （3）`margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;`
+
+对上面的第三条总结一下：（非常重要）
+
+```
+margin:0 auto; //让这个div自己在大容器中居中。
+text-align: center; //让这个div内部的文本居中。
+```
+
+顺便普及一下知识，text-align还有：
+
+```
+text-align:left; //没啥用，因为默认居左
+text-align:right; //文本居右
+```
+
+### 善于使用父亲的padding，而不是儿子的margin
+
+我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p）
+
+```
+ <div>
+ <p></p>
+ </div>
+```
+
+上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象：
+
+
+
+
+此时我们给父亲div加一个border属性，就正常了：
+
+
+
+
+
+如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。
+
+**margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。**
+
+所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
+
+
+## 关于margin的IE6兼容问题
+
+
+### IE6的双倍margin的bug：
+
+当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign。
+
+```
+ <ul>
+ <li></li>
+ <li></li>
+ <li></li>
+ </ul>
+```
+
+
+
+
+
+解决方案：
+
+（1）使浮动的方向和margin的方向，相反。
+
+所以，你就会发现，我们特别喜欢，浮动的方向和margin的方向相反。并且，前端开发工程师，把这个当做习惯了。
+
+```
+ float: left;
+ margin-right: 40px;
+```
+
+
+
+（2）使用hack：（没必要，别惯着这个IE6）
+
+单独给队首的元素，写一个一半的margin：
+
+```
+<li class="no1"></li>
+```
+
+```
+ul li.no1{
+ _margin-left:20px;
+}
+```
+
+PS：双倍margin的问题，面试经常问哦。
+
+
+
+### IE6的3px bug
+
+
+
+解决办法：不用管，因为根本就不允许用儿子踹父亲（即描述父子之间的距离，请用padding，而不是margin）。所以，如果你出现了3px bug，说明你的代码不标准。
+
+
+IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲IE6的兼容性问题，就是为了增加面试的成功率，不是为了成为IE6的专家。
+
+
+
+## Fireworks和others
+
+### Fireworks
+
+fireworks是Adobe公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks的默认文件格式是png。
+
+标尺的快捷键：Ctrl + Alt+ R
+
+
+### others
+
+
+
+首行缩进两个汉字：
+
+```
+text-indent: 2em;
+```
+
+上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。
+
+
+
+## 我的公众号
+
+想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
+
+扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
+
+
+
+
+
diff --git a/02-CSS/06-CSS案例讲解：博雅互动.md b/02-CSS/08-CSS案例讲解：博雅互动.md
similarity index 98%
rename from 02-CSS/06-CSS案例讲解：博雅互动.md
rename to 02-CSS/08-CSS案例讲解：博雅互动.md
index d909823..81e2a95 100644
--- a/02-CSS/06-CSS案例讲解：博雅互动.md
+++ b/02-CSS/08-CSS案例讲解：博雅互动.md
@@ -66,7 +66,7 @@
font-size: 14px;
font-family: "Microsoft YaHei","SimSun";
height: 8888px;
- }
+ }
.header{
height: 58px;
background-color: #191D3A;
@@ -104,8 +104,8 @@
text-align: center; /*让这个div内部的文本居中*/
}
.header .nav ul li a.current{
- color:white;
- background: #252947;
+ color:white;
+ background: #252947;
}
.header .nav ul li a:hover{
color: white;
@@ -117,7 +117,7 @@
height: 58px;
width: 100px;
padding-left: 48px;
- padding-top: 12px;
+ padding-top: 12px;
}
.header .jrwm_box .jrwm{
diff --git a/推荐链接.md b/推荐链接.md
index b33f1dd..6743be4 100644
--- a/推荐链接.md
+++ b/推荐链接.md
@@ -48,3 +48,20 @@
- [介绍几个上网+分流+图床工具](http://www.viyuedu.com/kaopuseo/61071.html)
+
+### 2018-01-12
+
+- [张鑫旭 | 话说我为什么要闭关学习](http://www.zhangxinxu.com/life/2013/03/%E6%88%91%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E9%97%AD%E5%85%B3%E5%AD%A6%E4%B9%A0/)
+
+
+作者闭关学习了半年的前端。
+
+
+
+
+
+
+
+
+
+