+ + + +例如，上图所示：假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。 + + + +``标签有必要强调一下。很多人以为``标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是`
有生之年
+ 狭路相逢
+
+
+
+
+
+```
+上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：
+
+
+
+补充一下，如果我在css样式中这样写：
+```html
+padding:20 30 40 50;
+```
+上方代码的设置边距的顺序是：上、右、下、左（顺时针方向）。margin的道理是一样的。
+
+
+## 定位属性(position,float,overflow,z-index)
+
+在讲之前，有个概念叫顺序流，需要强调一下。
+
+**顺序流**：所有的标签的初始排列顺序就称为顺序流。
+
+有两种情况会脱离本身的顺序流：
+ - 1、控件的位置设置为绝对定位。
+ - 2、设置控件的float属性。
+
+### 1、pisition属性：
+
+定位属性position的属性值可以是absolute、relative。
+
+position定位分为绝对定位和相对定位：
+ - `position:absolute;` **绝对定位**：定义横纵坐标，原点在父容器的左上角。**脱离了本身的顺序流**。横坐标用left表示，纵坐标用top表示。
+
+
+绝对定位的举例：
+
+```html
+
+```
+
+- `position:relative;` **相对定位**：相对于自己原来的位置。
+
+相对定位的举例：
+
+```html
+
+
+
+
+
+
+
+
+ 有生之年
+ 狭路相逢
+
+
+
+
+```
+
+效果：
+
+
+
+
+### 2、float属性：浮动
+
+`float`属性会让元素脱离原来的顺序流，它的属性值可以是：
+ - `none`：默认值，对象不漂浮
+ - `left`：文本流向对象的右边
+ - `right`：文本流向对象的左边
+
+举例：
+
+
+
+我们知道，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的两个``标签出现了浮动，于是这里两个标签在另外一个层面上水平排列了。而`Document
+
+
+
+
+
+
+
+ 
+```
+
+举例代码：
+
+```html
+
+
+
+
+```
+
+效果如下：（IE有效果，google浏览器无效果）
+
+
+
+**延伸：**
+滤镜本身是平面设计中的知识。如果你懂一点PS的话···打开PS看看吧：
+
+
+
+爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿···
+
+
+
+
+## 导航栏的制作（本段内容忽略）
+
+现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
+
+
+
+代码：
+
+```html
+
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+```
+
+实现效果如下：
+
+
+
+国庆这四天，连续写了四天的博客，白天和黑夜，从未停歇，只交替没交换，为的就是这每日一发。以后会不断更新的。
+
+##我的公众号
+
+下图是我的微信公众号（生命团队id：`vitateam`），欢迎有心人关注。**博客园分享技术，公众号分享心智**。
+
+我会很感激第一批关注我的人。**此时，年轻的我和你，一无所有；而后，富裕的你和我，满载而归。**
+
+
\ No newline at end of file
diff --git a/02-CSS/02-CSS的继承性和层叠性.md b/02-CSS/03-CSS的继承性和层叠性.md
similarity index 99%
rename from 02-CSS/02-CSS的继承性和层叠性.md
rename to 02-CSS/03-CSS的继承性和层叠性.md
index 3fa47bc..ec2ab30 100644
--- a/02-CSS/02-CSS的继承性和层叠性.md
+++ b/02-CSS/03-CSS的继承性和层叠性.md
@@ -383,11 +383,6 @@ PS：! important做站的时候，不允许使用。因为会让css写的很乱
选择器的写法权重，谁离的近，谁写在下面。
-
-
-
-
-
### CSS样式表的冲突的总结
- 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
diff --git a/02-CSS/03-盒子模型.md b/02-CSS/04-盒子模型.md
similarity index 100%
rename from 02-CSS/03-盒子模型.md
rename to 02-CSS/04-盒子模型.md
diff --git a/02-CSS/04-浮动.md b/02-CSS/05-浮动.md
similarity index 94%
rename from 02-CSS/04-浮动.md
rename to 02-CSS/05-浮动.md
index fcbe0f1..ee02c9c 100644
--- a/02-CSS/04-浮动.md
+++ b/02-CSS/05-浮动.md
@@ -21,7 +21,11 @@
无论多少个空格、换行、tab，都会折叠为一个空格。
比如，如果我们想让img标签之间没有空隙，必须紧密连接：
+
+```
+```
+
**（2）高矮不齐，底边对齐：**
@@ -216,6 +220,7 @@ css中一共有三种手段，使一个元素脱离标准文档流：
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
举例如下：
+
@@ -223,10 +228,12 @@ css中一共有三种手段，使一个元素脱离标准文档流：
### 浮动的补充（做网站时注意）
+
上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：
+
@@ -444,6 +451,7 @@ css中一共有三种手段，使一个元素脱离标准文档流：
```
效果如下：
+
@@ -513,6 +521,7 @@ margin失效的本质原因是：上图中的box1和box2，高度为零。
我们看看例子效果就知道了：
+
上图这个例子就是隔墙法。
@@ -522,6 +531,7 @@ margin失效的本质原因是：上图中的box1和box2，高度为零。
近些年，有演化出了“内墙法”：
+
上面这个图非常重要，当作内墙法的公式，先记下来。
@@ -575,7 +585,7 @@ overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“
那么对于前言中的例子，我们同样可以使用这一属性：
-
+
@@ -816,7 +826,7 @@ margin:0 auto;
- （2）只有标准流的盒子，才能使用`margin:0 auto;`居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
- （3）`margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;`
-对上面的第三条总结一下：
+对上面的第三条总结一下：（非常重要）
```
margin:0 auto; //让这个div自己在大容器中居中。
@@ -858,10 +868,10 @@ text-align:right; //文本居右
所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
-### 关于margin的IE6兼容问题
+## 关于margin的IE6兼容问题
-#### IE6的双倍margin的bug：
+### IE6的双倍margin的bug：
当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign。
@@ -908,7 +918,7 @@ PS：双倍margin的问题，面试经常问哦。
-#### IE6的3px bug
+### IE6的3px bug
@@ -919,12 +929,36 @@ IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲I
-## Fireworks和精确盒子还原
+## Fireworks和others
+
+### Fireworks
fireworks是Adobe公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks的默认文件格式是png。
+标尺的快捷键：Ctrl + Alt+ R
+
+
+### others
+
+
+
+首行缩进两个汉字：
+
+```
+text-indent: 2em;
+```
+
+上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。
+第四天：定位
+
+第五天：背景、表格
+
+第六天：切图
+
+
+
diff --git a/02-CSS/06-CSS属性：行高&超链接&background.md b/02-CSS/06-CSS属性：行高&超链接&background.md
new file mode 100644
index 0000000..31dba16
--- /dev/null
+++ b/02-CSS/06-CSS属性：行高&超链接&background.md
@@ -0,0 +1,475 @@
+
+
+## 行高和字号
+
+### 行高
+
+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
+
+
+
+
+ Document
+
+
+
+
+
+
+```
+
+上方代码中，我们发现，当我们在定义`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/06-CSS案例讲解：博雅互动.md b/02-CSS/06-CSS案例讲解：博雅互动.md
new file mode 100644
index 0000000..ec30eb4
--- /dev/null
+++ b/02-CSS/06-CSS案例讲解：博雅互动.md
@@ -0,0 +1,48 @@
+
+
+
+## 前言
+
+> CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以[博雅互动](http://www.boyaa.com/)的官网首页举例。
+
+### 版心
+
+首页的**版心**如下：
+
+20170813_1535.png
+
+这里我们要普及一个概念，叫“[版心](https://baike.baidu.com/item/%E7%89%88%E5%BF%83)”。**版心是页面中主要内容所在的区域。**
+
+比如说，网站左上角的logo，设计图给出的左边距是143像素，此时，我们先玩不要以为，logo的左边距真的是143像素。因为设计图只是一个版心；而整个页面是处于浏览器的中间，浏览器的宽度是可以随时调整的。
+
+我们量一下中间四个方形图的width，是1000px，所以，网页版心的宽度是1000px。
+
+
+### 网页的结构
+
+从结构上来看，网页分为头部（导航栏）、banner区、内容区、底部。
+
+
+
+## 导航栏的制作
+
+在此我们只讲基础知识的使用，不涉及浏览器的优化。
+
+
+`class==header`这个div是顶部的通栏，我们在里面放一个1000px宽的div，作为通栏的版心，我一般把这个版心称为`class=inner_c`，c指的是center。
+
+`class=inner_c`不需要给高，因为它可以被内容撑高。
+
+现在我们需要在`class=inner_c`里放三个东西：左侧的logo、中间的导航栏、右侧的“加入我们”。
+
+
+
+接下来我们开始做右侧的「加入我们」，「加入我们」的背景是带圆角的矩形，这个圆角，实现的方式有两种：要么切图，要么用CSS3实现（IE 7、IE 8不兼容）。我们暂时使用切图来实现。
+
+我们最好把「加入我们」这个超链接``放到`div`里，然后设置div的margin和padding，而不是直接设置``的边距。
+
+我们起个名字叫`class=jrwm`是没有问题的，这在工作当中很常见，如果写成`class=join_us`反倒很别扭。
+
+
+
+
diff --git a/02-CSS/浏览器的兼容性问题.md b/02-CSS/浏览器的兼容性问题.md
index 0e22cc1..e59a103 100644
--- a/02-CSS/浏览器的兼容性问题.md
+++ b/02-CSS/浏览器的兼容性问题.md
@@ -1,53 +1,29 @@
-## 浏览器的兼容性问题
-
-IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下：
-
-- windows xp 操作系统安装的IE6
-- windows vista 操作系统安装的IE7
-- windows 7 操作系统安装的IE8
-- windows 8 操作系统安装的IE9
-- windows10 操作系统安装的edge
-
-浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。
-
-为了测试浏览器CSS 3的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接：
-
-- 中查看
-
-20170711_1948.png
-
-我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。
-
-
-
-
-
-
-
-### IETester软件
-
-我们可以用
-
-
-
-
+我们在div里放一个img，发现：
+在html和html5中，div的长宽是不同的，后者的高度要超过几个像素。
+比如说，下面这个是html的。
+```html
+
+
+
+
+ Document
+
+
+
+
`标签还在自己的层面上遵从顺序流进行排列。 + +### 3、clear属性：禁止浮动 + +`clear`属性的属性值可以是： + - `none`：默认值，允许两边都可以有浮动对象 + - `left`：不允许左边有浮动对象 + - `right`：不允许右边有浮动对象 + - `both`：不允许有浮动对象 + +### 4、overflow属性：超出范围的内容要怎么处理 + +`overflow`属性的属性值可以是： + - `auto`：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。 + - `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。 + - `hidden`：不显示超过对象尺寸的内容。 +对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。 + - `scroll`：总是显示滚动条。 + +针对上面的不同的属性值，我们来看一下效果： +举例： + +```html + + +
+ + + + + +其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案
+ 其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案
+ 其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案
+
+
+
+```
+
+效果：
+
+
+
+
+
+### 5、z-index属性：属性值大的位于上层，属性值小的位于下层
+
+这句话可能比较难理解。我们来看例子吧。
+
+这是默认情况下的例子：（div2在上层，div1在下层）
+
+
+
+现在加一个`z-index`属性，要求效果如下：
+
+
+
+
+## 鼠标的属性cursor
+
+鼠标的属性`cursor`有以下几个属性值：
+ - `auto`：默认值。浏览器根据当前情况自动确定鼠标光标类型。
+ - `pointer`：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
+ - `hand`：和`pointer`的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
+
+比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：
+```html
+p:hover{
+ cursor: pointer;
+}
+```
+
+另外还有以下的属性：（不用记，需要的时候查一下就行了）
+all-scroll : IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
+col-resize : IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
+crosshair : 简单的十字线光标。
+default : 客户端平台的默认光标。通常是一个箭头。
+hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
+move : 十字箭头光标。用于标示对象可被移动。
+help : 带有问号标记的箭头。用于标示有帮助信息存在。
+no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
+not-allowed : IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
+progress : IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
+row-resize : IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
+text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
+vertical-text : IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
+wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
+*-resize : 用于标示对象可被改变尺寸方向的箭头光标。
+ w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
+url ( url ) : IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。
+
+## 滤镜
+
+这里只举一个滤镜的例子吧。比如说让图片变成灰度图的效果，可以这样设置滤镜：
+
+```html
+
+```
+
+举例代码：
+
+```html
+
+ | 原始图片 | +图片加入黑白效果 | +
|
+ | /*滤镜：设置图片为灰白效果*/
+
+```
+
**（2）高矮不齐，底边对齐：**
@@ -216,6 +220,7 @@ css中一共有三种手段，使一个元素脱离标准文档流：
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
举例如下：
+
@@ -223,10 +228,12 @@ css中一共有三种手段，使一个元素脱离标准文档流：
### 浮动的补充（做网站时注意）
+
上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：
+
@@ -444,6 +451,7 @@ css中一共有三种手段，使一个元素脱离标准文档流：
```
效果如下：
+
@@ -513,6 +521,7 @@ margin失效的本质原因是：上图中的box1和box2，高度为零。
我们看看例子效果就知道了：
+
上图这个例子就是隔墙法。
@@ -522,6 +531,7 @@ margin失效的本质原因是：上图中的box1和box2，高度为零。
近些年，有演化出了“内墙法”：
+
上面这个图非常重要，当作内墙法的公式，先记下来。
@@ -575,7 +585,7 @@ overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“
那么对于前言中的例子，我们同样可以使用这一属性：
-
+
@@ -816,7 +826,7 @@ margin:0 auto;
- （2）只有标准流的盒子，才能使用`margin:0 auto;`居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
- （3）`margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;`
-对上面的第三条总结一下：
+对上面的第三条总结一下：（非常重要）
```
margin:0 auto; //让这个div自己在大容器中居中。
@@ -858,10 +868,10 @@ text-align:right; //文本居右
所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
-### 关于margin的IE6兼容问题
+## 关于margin的IE6兼容问题
-#### IE6的双倍margin的bug：
+### IE6的双倍margin的bug：
当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign。
@@ -908,7 +918,7 @@ PS：双倍margin的问题，面试经常问哦。
-#### IE6的3px bug
+### IE6的3px bug
@@ -919,12 +929,36 @@ IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲I
-## Fireworks和精确盒子还原
+## Fireworks和others
+
+### Fireworks
fireworks是Adobe公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks的默认文件格式是png。
+标尺的快捷键：Ctrl + Alt+ R
+
+
+### others
+
+
+
+首行缩进两个汉字：
+
+```
+text-indent: 2em;
+```
+
+上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。
+第四天：定位
+
+第五天：背景、表格
+
+第六天：切图
+
+
+
diff --git a/02-CSS/06-CSS属性：行高&超链接&background.md b/02-CSS/06-CSS属性：行高&超链接&background.md
new file mode 100644
index 0000000..31dba16
--- /dev/null
+++ b/02-CSS/06-CSS属性：行高&超链接&background.md
@@ -0,0 +1,475 @@
+
+
+## 行高和字号
+
+### 行高
+
+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
+
+
+
+
+
+ 
+
+
+
+
+```
+
+