diff --git a/02-CSS/01-CSS样式表和选择器.md b/02-CSS/01-CSS样式表和选择器.md
index 095b9b2..74920c9 100644
--- a/02-CSS/01-CSS样式表和选择器.md
+++ b/02-CSS/01-CSS样式表和选择器.md
@@ -52,6 +52,10 @@ css的最新版本是css3，我们学习的是css2.1。 因为css3和css2.1不
比如说，有一个样式需要在一百个页面上显示，如果是html来实现，那要写一百遍，现在有了css，只要写一遍。现在，html只提供数据和一些控件，完全交给css提供各种各样的样式。
+### CSS的重点知识点
+
+盒子模型、浮动、定位
+
### CSS 整体感知
@@ -94,7 +98,7 @@ css的最新版本是css3，我们学习的是css2.1。 因为css3和css2.1不
解释如下：
-20170710_1604.png
+
我们写css的地方是style标签，就是“样式”的意思，写在head里面。后面的课程中我们将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面。
diff --git a/02-CSS/02-CSS的继承性和层叠性.md b/02-CSS/02-CSS的继承性和层叠性.md
index 1c7bfc2..3fa47bc 100644
--- a/02-CSS/02-CSS的继承性和层叠性.md
+++ b/02-CSS/02-CSS的继承性和层叠性.md
@@ -1,13 +1,16 @@
-02-CSS的继承性和层叠性
+> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/7253929.html)，并在[GitHub](https://github.com/smyhvae/Web)上持续更新。以下是正文。
+
+
## CSS的继承性
-我们来看下面这样的代码：
+我们来看下面这样的代码，来引入继承性：
+
+
-20170724_2359.png
上方代码中，我们给div标签增加红色属性，却发现，div里的每一个子标签``也增加了红色属性。于是我们得到这样的结论：
@@ -17,13 +20,15 @@
但是呢，如果再给上方的代码加一条属性：
-20170725_2122.jpg
+
-上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。
-以下属性具有继承性：color、 text-开头的、line-开头的、font-开头的。
-**关于文字样式的，都能够继承；所有关于盒子的、定位的、布局的属性都不能继承。**
+上图中，我们给div加了一个border，但是发现只有div具备了border属性，而p标签却没有border属性。于是我们可以得出结论：
+
+- 关于文字样式的，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
+
+- 所有关于盒子的、定位的、布局的属性都不能继承。
以后当我们谈到css有哪些特性的时候，我们要首先想到继承性。而且，要知道哪些属性具有继承性、哪些属性没有继承性。
@@ -44,8 +49,8 @@ CSS像艺术家一样优雅，像工程师一样严谨。
我们来看一个例子，就知道什么叫层叠性了。
+
-20170725_2132.png
上图中，三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。
@@ -63,7 +68,9 @@ CSS像艺术家一样优雅，像工程师一样严谨。
#### 举例1：计算权重
-20170725_2138.png
+
+
+
如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
@@ -71,26 +78,31 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
#### 举例2：权重相同时
-20170725_2250.png
+
+
+
上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。
#### 举例3：具有实战性的例子
-20170726_2221.png
+
+
+
现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
如果写成下面这种代码是无法实现的：
-20170726_2225.png
+
无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。
正确的做法是：（**非常重要**）
-20170726_2229.png
+
+
上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：**所有人当中，让某一个人为红，让其他所有人为蓝。**
@@ -110,22 +122,26 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
为了验证上面这句话，我们来看看下面这样的例子：
+
-20170727_0843.png
另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。**举例如下：
-20170727_0845.png
+
-### 权重问题大总结
-通过列举上面几个例子，我们对权重问题做一个总结：
-- （1）先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，就近原则。
-- （2）如果没有选中，那么权重是0。如果大家都是0，就近原则。
+### 层叠性：权重问题大总结（重要）
+
+层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
+
+通过列举上面几个例子，我们对权重问题做一个总结。
+
+- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
+- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
### 题目演示
@@ -133,28 +149,246 @@ CSS的层叠性讲完了，我们来做几个题目吧。
#### 题目1
-20170727_0928.png
+
+
+
#### 题目2
-20170727_0929.png
+
#### 题目3
-20170727_0930.png
+
+
#### 题目4
-20170727_0931.png
+
-## CSS样式表的冲突解决
+
+## 知识回顾
+
+> 我们把以上内容和上一篇文章做一个简单的知识回顾。
+
+
+
+
+### CSS属性
+
+> css属性，面试的时候会有笔试，笔试没有智能感应的。
+
+加粗，倾斜，下划线：
+
+```
+font-weight:bold;
+font-style:italic;
+text-decoration:underline;
+```
+
+
+
+背景颜色、前景色：
+
+```
+background-color:red;
+color:red;
+```
+
+### class和id的区别
+
+class用于css的，id用于js的。
+
+1）class页面上可以重复。id页面上唯一，不能重复。
+2）一个标签可以有多个class，用空格隔开。但是id只能有id。
+
+### 各种选择器(浏览器兼容性)
+
+IE6层面兼容的选择器： 标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符。如下：
+
+```
+p
+#box
+.spec
+div p
+div.spec
+div,p
+*
+```
+
+
+IE7能够兼容的：儿子选择器、下一个兄弟选择器。如下：
+
+```
+div>p
+h3+p
+```
+
+IE8能够兼容的：
+
+```
+ul li:first-child
+ul li:last-child
+```
+
+
+### css两个性质
+
+- 继承性：好的事儿。继承从上到下，哪些能？哪些不能？
+
+- 层叠性：冲突，多个选择器描述了同一个属性，听谁的？
+
+
+
+再看几个题目：
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 权重问题深入
+
+### 同一个标签，携带了多个类名，有冲突：
+
+这里需要补充两种冲突的情况：
+
+- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级： **定义**的样式表中，谁最近，就用谁。
+- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
+
+
+例如：（就近原则）
+
+
+
+
+上图中，**文字显示的颜色均为红色**。因为这和在标签中的挂类名的书序无关，只和css的顺序有关。
+
+
+### !important标记
+
+来看个很简单的例子：
+
+
+
+
+上图中，显然id选择器的权重最大，所以文字的颜色是红色。
+
+如果我们想让文字的颜色显示为绿色，只需要给标签选择器的加一个`!important`标记，此时其权重为无穷大。如下：
+
+
+
+
+
+important是英语里面的“重要的”的意思。我们可以通过如下语法：
+
+```
+k:v !important;
+```
+
+来给一个属性提高权重。这个属性的权重就是**无穷大**。
+
+注意，一定要注意语法的正确性。
+
+正确的语法：
+
+```
+font-size:60px !important;
+```
+
+错误的语法：
+
+
+```
+font-size:60px; !important; 不能把!important写在外面
+font-size:60px important; 不能忘记感叹号
+```
+
+`!important`标记需要强调如下3点：
+
+**（1）!important提升的是一个属性，而不是一个选择器**
+
+
+```css
+ p{
+ color:red !important; 只写了这一个!important，所以只有字体颜色属性提升了权重
+ font-size: 100px ; 这条属性没有写!important，所以没有提升权重
+ }
+ #para1{
+ color:blue;
+ font-size: 50px;
+ }
+ .spec{
+ color:green;
+ font-size: 20px;
+ }
+```
+
+所以，综合来看，字体颜色是red（听important的）；字号是50px（听id的）。
+
+
+**（2）!important无法提升继承的权重，该是0还是0**
+
+
+比如HTML结构：
+
+```html
+
+```
+
+有CSS样式：
+
+```css
+ div{
+ color:red !important;
+ }
+ p{
+ color:blue;
+ }
+```
+
+由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。
+
+干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。
+
+**(3)!important不影响就近原则**
+
+如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？
+答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。
+
+为了验证这个问题，我们可以搞两层具有继承性的标签，然后给外层标签加一个!important，最终看看就近原则有没有被打破。举例如下：
+
+
+
+
+PS：! important做站的时候，不允许使用。因为会让css写的很乱。
+现在，我们知道层叠性能比较很多东西：
+选择器的写法权重，谁离的近，谁写在下面。
+
+
+
+
+
+
+
+### CSS样式表的冲突的总结
- 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
- 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
@@ -168,7 +402,7 @@ CSS的层叠性讲完了，我们来做几个题目吧。
另外还有两个冲突的情况：
-- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级： **定义**的样式表中，谁最近，就用谁。
+- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：**定义**的样式表中，谁最近，就用谁。
- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
例如：
@@ -177,53 +411,23 @@ CSS的层叠性讲完了，我们来做几个题目吧。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+### 权重计算的总结（非常重要）
+
+
+
+上面这个图非常重要，我们针对这个图做一个文字描述：
+
+- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
+- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
+
+
+
+
+我们来看下面这个例子：
+
+img
+
+这例子有点难。
diff --git a/02-CSS/03-盒子模型.md b/02-CSS/03-盒子模型.md
new file mode 100644
index 0000000..b3f0192
--- /dev/null
+++ b/02-CSS/03-盒子模型.md
@@ -0,0 +1,447 @@
+
+
+
+## 盒子模型
+
+
+### 盒子中的区域
+
+一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
+
+- width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。
+- height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。
+- padding：内边距。
+- border：边框。
+- margin：外边距。
+
+盒子模型的示意图：
+
+
+
+
+
+
+代码演示：
+
+
+
+
+
+上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。注意：**宽度和真实占有宽度，不是一个概念！**
+
+
+### 认识width、height
+
+
+一定要知道，在前端开发工程师眼中，世界中的一切都是不同的。
+
+比如说，丈量稿纸，前端开发工程师只会丈量内容宽度：
+
+
+
+
+
+下面这两个盒子，真实占有宽高，都是302*302：
+
+ 盒子1：
+
+ ```css
+ .box1{
+ width: 100px;
+ height: 100px;
+ padding: 100px;
+ border: 1px solid red;
+ }
+ ```
+
+盒子2：
+
+```css
+ .box2{
+ width: 250px;
+ height: 250px;
+ padding: 25px;
+ border: 1px solid red;
+ }
+```
+
+
+
+真实占有宽度 = 左border + 左padding + width + 右padding + 右border
+
+上面这两个盒子的盒模型图如下：
+
+
+
+
+**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
+
+PS：小技巧：在sublime text中，为了快速输入`border:1px solid red;`这个属性，可以直接输入`bd`，然后选第二个后回车。
+
+
+### 认识padding
+
+
+#### padding区域也有颜色
+
+
+padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有boder以内的区域。**
+
+效果如下：
+
+
+
+
+
+#### padding有四个方向
+
+padding是4个方向的，所以我们能够分别描述4个方向的padding。
+
+方法有两种，第一种写小属性；第二种写综合属性，用空格隔开。
+
+小属性的写法：
+
+```
+ padding-top: 30px;
+ padding-right: 20px;
+ padding-bottom: 40px;
+ padding-left: 100px;
+```
+
+
+
+综合属性的写法：(上、右、下、左)（用空格隔开）
+
+
+```
+padding:30px 20px 40px 100px;
+```
+
+如果写了四个值，则顺序为：上、右、下、左。
+
+如果只写了三个值，则顺序为：上、右、下。??和右一样。
+
+如果只写了两个值，比如说：
+
+```
+padding: 30px 40px;
+```
+
+则顺序等价于：30px 40px 30px 40px;
+
+
+要懂得，**用小属性层叠大属性**。比如：
+
+```
+padding: 20px;
+padding-left: 30px;
+```
+
+上面的padding对应盒子模型为：
+
+
+
+
+下面的写法：
+
+```
+padding-left: 30px;
+padding: 20px;
+```
+
+第一行的小属性无效，因为被第二行的大属性层叠掉了。
+
+
+下面的题，会做了，说明你明白了。
+
+#### 一些题目
+
+**题目1：**说出下面盒子真实占有宽高，并画出盒模型图。
+
+```css
+ div{
+ width: 200px;
+ height: 200px;
+ padding: 10px 20px 30px;
+ padding-right: 40px;
+ border: 1px solid #000;
+ }
+```
+
+
+答案：
+
+
+
+
+
+
+**题目2：**说出下面盒子真实占有宽高，并画出盒模型图。
+
+```css
+ div{
+ width: 200px;
+ height: 200px;
+ padding-left: 10px;
+ padding-right: 20px;
+ padding:40px 50px 60px;
+ padding-bottom: 30px;
+ border: 1px solid #000;
+ }
+```
+
+答案：
+
+`padding-left:10px；` 和`padding-right:20px;` 没用，因为后面的padding大属性，层叠掉了他们。
+
+盒子模型如下：
+
+
+
+
+
+
+**题目3：**现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
+
+
+
+
+答案：
+
+```
+ width:123px;
+ height:123px;
+ padding:20px 40px;
+ border:1px solid red;
+```
+
+**题目4：**现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
+
+
+
+
+答案：
+
+```
+ width:123px;
+ height:123px;
+ padding:20px;
+ padding-right:40px;
+ border:1px solid red;
+
+```
+
+
+
+#### 一些元素，默认带有padding
+
+一些元素，默认带有`padding`，比如ul标签。如下：
+
+
+
+
+上图显示，不加任何样式的ul，也是有40px的padding-left。
+
+所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding。
+
+可以使用`*`进行清除：
+
+```
+ *{
+ margin: 0;
+ padding: 0;
+ }
+```
+
+
+ 但是，`*`的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：
+
+```
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
+ margin:0;
+ padding:0;
+}
+```
+
+
+
+### 认识border
+
+border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
+
+颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。
+
+#### border-style
+
+border的所有的线型如下：（我们可以通过查看`CSS参考手册`得到）
+
+
+
+
+比如`border:10px ridge red;`这个属性，在chrome和firefox、IE中有细微差别：（因为可以显示出效果，因此并不是兼容性问题，只是有细微差别而已）
+
+
+
+
+
+如果公司里面的设计师是处女座的，追求极高的**页面还原度**，那么不能使用css来制作边框。就要用到图片，就要切图了。
+
+所以，比较稳定的border-style就几个：solid、dashed、dotted。
+
+
+
+
+
+
+#### border拆分
+
+border是一个大综合属性。比如说：
+
+```
+border:1px solid red;
+```
+
+就是把4个边框，都设置为1px宽度、线型实线、red颜色。
+
+border属性是能够被拆开的，有两大种拆开的方式：
+
+- （1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
+
+- （2）按方向拆开：border-top、border-right、border-bottom、border-left。
+
+现在我们明白了：**一个border属性，是由三个小属性综合而成的**。如果某一个小属性后面是空格隔开的多个值，那么就是上右下左的顺序。举例如下：
+
+```
+border-width:10px 20px;
+border-style:solid dashed dotted;
+border-color:red green blue yellow;
+```
+
+效果如下：
+
+
+
+
+
+（1）按三要素拆：
+
+```
+border-width:10px; //边框宽度
+border-style:solid; //线型
+border-color:red; //颜色。
+```
+
+等价于：
+
+```
+border:10px solid red;
+```
+
+(2)按方向来拆：
+
+```
+border-top:10px solid red;
+border-right:10px solid red;
+border-bottom:10px solid red;
+border-left:10px solid red;
+```
+
+等价于：
+
+```
+border:10px solid red;
+```
+
+（3）按三要素和方向来拆：
+
+> 就是把每个方向的，每个要素拆开。3*4 = 12
+
+```
+ border-top-width:10px;
+ border-top-style:solid;
+ border-top-color:red;
+ border-right-width:10px;
+ border-right-style:solid;
+ border-right-color:red;
+ border-bottom-width:10px;
+ border-bottom-style:solid;
+ border-bottom-color:red;
+ border-left-width:10px;
+ border-left-style:solid;
+ border-left-color:red;
+```
+
+
+等价于：
+
+```
+border:10px solid red;
+
+```
+
+
+工作中到底用什么？很简答：什么简单用什么。举例如下：
+
+
+
+
+为了实现上方效果，写法如下：
+
+```
+border:10px solid red;
+border-right-color:blue;
+```
+
+
+
+
+为了实现上方效果，写法如下：
+
+```
+border:10px solid red;
+border-style:solid dashed;
+```
+
+border可以没有：
+
+```
+border:none;
+```
+
+可以某一条边没有：
+
+```
+border-left: none;
+```
+
+也可以调整左边边框的宽度为0：
+
+```
+border-left-width: 0;
+```
+
+
+#### 举例：利用border属性画一个三角形（小技巧）
+
+步骤如下：
+
+（1）当我们设置盒子的width和height为0时，此时效果如下：
+
+
+
+
+（2）然后将border的底部取消：
+
+
+
+
+（3）最后设置border的左边和右边为白色：
+
+
+
+
+这样，一个三角形就画好了。
+
+
+
+
diff --git a/README.md b/README.md
index 2ef8e1d..ae3cfc4 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,19 @@
# JS
+
从零开始学前端，做一个web全栈工程师。
+
+## HTML
+
+- [01-html标签图文详解（一）](./01-html/01-html标签图文详解（一）)
+
+- [01-html标签图文详解（二）](./01-html/01-html标签图文详解（二）)
+
+
+## CSS
+
+- [01-CSS样式表和选择器](./02-CSS/01-CSS样式表和选择器)
+
+- [02-CSS的继承性和层叠性](./02-CSS/02-CSS的继承性和层叠性)
+
+- [03-盒子模型](./02-CSS/03-盒子模型)
+