1

add file

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
+![](http://img.smyhvae.com/20170710_1605.png)
 
 
 我们写css的地方是style标签，就是“样式”的意思，写在head里面。后面的课程中我们将知道，css也可以写在单独的文件里面，现在我们先写在style标签里面。

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的继承性
 
-我们来看下面这样的代码：
+我们来看下面这样的代码，来引入继承性：
+
+![](http://img.smyhvae.com/20170724_2359.png)
 
-20170724_2359.png
 
 上方代码中，我们给div标签增加红色属性，却发现，div里的每一个子标签`<p>`也增加了红色属性。于是我们得到这样的结论：
 
@@ -17,13 +20,15 @@
 
 但是呢，如果再给上方的代码加一条属性：
 
-20170725_2122.jpg
+![](http://img.smyhvae.com/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像艺术家一样优雅，像工程师一样严谨。
 我们来看一个例子，就知道什么叫层叠性了。
 
 
+![](http://img.smyhvae.com/20170725_2132.png)
 
-20170725_2132.png
 
 
 上图中，三种选择器同时给P标签增加颜色的属性，但是，文字最终显示的是蓝色，这个时候，就出现了层叠性的情况。
@@ -63,7 +68,9 @@ CSS像艺术家一样优雅，像工程师一样严谨。
 
 #### 举例1：计算权重
 
-20170725_2138.png
+![](http://img.smyhvae.com/20170725_2138.png)
+
+
 
 如上图所示，统计各个选择器的数量，优先级高的胜出。文字的颜色为红色。
 
@@ -71,26 +78,31 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
 
 #### 举例2：权重相同时
 
-20170725_2250.png
+![](http://img.smyhvae.com/20170725_2250.png)
+
+
 
 上图可以看到，第一个样式和第二个样式的权重相同。但第二个样式的书写顺序靠后，因此以第二个样式为准（就近原则）。
 
 
 #### 举例3：具有实战性的例子
 
-20170726_2221.png
+![](http://img.smyhvae.com/20170726_2221.png)
+
+
 
 现在我要让一个列表实现上面的这种样式：第一个li为红色，剩下的li全部为蓝色。
 
 如果写成下面这种代码是无法实现的：
 
-20170726_2225.png
+![](http://img.smyhvae.com/20170726_2225.png)
 
 无法实现的原因很简单，计算一下三个选择器的权重就清楚了，显然第二个样式被第一个样式表覆盖了。
 
 正确的做法是：（**非常重要**）
 
-20170726_2229.png
+![](http://img.smyhvae.com/20170726_2229.png)
+
 
 上图中，第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果：**所有人当中，让某一个人为红，让其他所有人为蓝。**
 
@@ -110,22 +122,26 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
 
 为了验证上面这句话，我们来看看下面这样的例子：
 
+![](http://img.smyhvae.com/20170727_0843.png)
 
-20170727_0843.png
 
 另外：**如果大家都是0，那么有一个就近原则：谁描述的近，听谁的。**举例如下：
 
-20170727_0845.png
+![](http://img.smyhvae.com/20170727_0845.png)
 
 
 
-### 权重问题大总结
 
-通过列举上面几个例子，我们对权重问题做一个总结：
 
-- （1）先看有没有选中，如果选中了，那么以（id数，类数，标签数）来计权重。谁大听谁的。如果都一样，就近原则。
 
-- （2）如果没有选中，那么权重是0。如果大家都是0，就近原则。
+### 层叠性：权重问题大总结（重要）
+
+层叠性。层叠性是一种能力，就是处理冲突的能力。当不同选择器，对一个标签的同一个样式，有不同的值，听谁的？这就是冲突。css有着严格的处理冲突的机制。
+
+通过列举上面几个例子，我们对权重问题做一个总结。
+
+- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
+- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
 
 ### 题目演示
 
@@ -133,28 +149,246 @@ CSS的层叠性讲完了，我们来做几个题目吧。
 
 #### 题目1 
 
-20170727_0928.png
+
+![](http://img.smyhvae.com/20170727_0851.png)
+
 
 
 #### 题目2
 
-20170727_0929.png
+![](http://img.smyhvae.com/20170727_0853.png)
 
 
 #### 题目3
 
-20170727_0930.png
+![](http://img.smyhvae.com/20170727_0855.png)
+
 
 #### 题目4
 
-20170727_0931.png
+![](http://img.smyhvae.com/20170727_0857.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两个性质
+
+- 继承性：好的事儿。继承从上到下，哪些能？哪些不能？
+
+- 层叠性：冲突，多个选择器描述了同一个属性，听谁的？
+
+
+
+再看几个题目：
+
+
+
+![](http://img.smyhvae.com/20170727_0900.png)
+
+![](http://img.smyhvae.com/20170727_0901.png)
+
+![](http://img.smyhvae.com/20170727_0902.png)
+
+
+![](http://img.smyhvae.com/20170727_0903.png)
+
+
+
+## 权重问题深入
+
+### 同一个标签，携带了多个类名，有冲突：
+
+这里需要补充两种冲突的情况：
+
+- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：	**定义**的样式表中，谁最近，就用谁。
+- 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
+
+
+例如：（就近原则）
+
+![](http://img.smyhvae.com/20170727_2021.png)
+
+
+上图中，**文字显示的颜色均为红色**。因为这和在标签中的挂类名的书序无关，只和css的顺序有关。
+
+
+### !important标记
+
+来看个很简单的例子：
+
+![](http://img.smyhvae.com/20170727_2029.png)
+
+
+上图中，显然id选择器的权重最大，所以文字的颜色是红色。
+
+如果我们想让文字的颜色显示为绿色，只需要给标签选择器的加一个`!important`标记，此时其权重为无穷大。如下：
+
+![](http://img.smyhvae.com/20170727_2035.png)
+
+
+
+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
+	<div>
+		<p>哈哈哈哈哈哈哈哈</p>
+	</div>
+```
+
+有CSS样式：
+
+```css
+	div{
+		color:red !important;
+	}
+	p{
+		color:blue;
+	}
+```
+
+由于div是通过继承性来影响文字颜色的，所以!important无法提升它的权重，权重依然是0。
+
+干不过p标签，因为p标签是实实在在选中了，所以字是蓝色的（以p为准）。
+
+**(3)!important不影响就近原则**
+
+如果大家都是继承来的，按理说应该按照“就近原则”，那么important能否影响就近原则呢？
+答案是：不影响。远的，永远是远的。不能给远的写一个important，干掉近的。
+
+为了验证这个问题，我们可以搞两层具有继承性的标签，然后给外层标签加一个!important，最终看看就近原则有没有被打破。举例如下：
+
+![](http://img.smyhvae.com/20170727_2046.png)
+
+
+PS：! important做站的时候，不允许使用。因为会让css写的很乱。
+现在，我们知道层叠性能比较很多东西：
+选择器的写法权重，谁离的近，谁写在下面。
+
+
+
+
+
+
+
+### CSS样式表的冲突的总结
 
 - 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
 - 2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
@@ -168,7 +402,7 @@ CSS的层叠性讲完了，我们来做几个题目吧。
 
 另外还有两个冲突的情况：
 
-- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：	**定义**的样式表中，谁最近，就用谁。
+- 1、对同一个标签，如果用到了了多个相同的内嵌样式表，它的优先级：**定义**的样式表中，谁最近，就用谁。
 - 2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。
 
 例如：
@@ -177,53 +411,23 @@ CSS的层叠性讲完了，我们来做几个题目吧。
 
 
 
-
+### 权重计算的总结（非常重要）
-
+
-
+![](http://img.smyhvae.com/20170727_2050.png)
-
+
-
+上面这个图非常重要，我们针对这个图做一个文字描述：
-
+
-
+- 选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
-
+- 没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
-
+
-
+
-
+
-
+
-
+我们来看下面这个例子：
-
+
-
+img
-
+
-
+这例子有点难。
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 

02-CSS/03-盒子模型.md

@@ -0,0 +1,447 @@
+
+
+
+## 盒子模型
+
+
+### 盒子中的区域
+
+一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
+
+- width：内容的宽度。CSS中 width 指的是内容的宽度，而不是盒子的宽度。
+- height：内容的高度。CSS中 height 指的是内容的高度，而不是盒子的高度。
+- padding：内边距。
+- border：边框。
+- margin：外边距。
+
+盒子模型的示意图：
+
+![](http://img.smyhvae.com/20170727_2128.png)
+
+
+
+
+代码演示：
+
+![](http://img.smyhvae.com/20170727_2326.png)
+
+
+
+上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。注意：**宽度和真实占有宽度，不是一个概念！**
+
+
+### 认识width、height
+
+
+一定要知道，在前端开发工程师眼中，世界中的一切都是不同的。
+
+比如说，丈量稿纸，前端开发工程师只会丈量内容宽度：
+
+![](http://img.smyhvae.com/20170727_2329.png)
+
+
+
+下面这两个盒子，真实占有宽高，都是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
+
+上面这两个盒子的盒模型图如下：
+
+![](http://img.smyhvae.com/20170728_0925.png)
+
+
+**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
+
+PS：小技巧：在sublime text中，为了快速输入`border:1px solid red;`这个属性，可以直接输入`bd`，然后选第二个后回车。
+
+
+### 认识padding
+
+
+#### padding区域也有颜色
+
+
+padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有boder以内的区域。**
+
+效果如下：
+
+![](http://img.smyhvae.com/20170728_1005.png)
+
+
+
+#### 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对应盒子模型为：
+
+![](http://img.smyhvae.com/20170728_1039.png)
+
+
+下面的写法：
+
+```
+padding-left: 30px;
+padding: 20px;
+```
+
+第一行的小属性无效，因为被第二行的大属性层叠掉了。
+
+
+下面的题，会做了，说明你明白了。
+
+#### 一些题目
+
+**题目1：**说出下面盒子真实占有宽高，并画出盒模型图。
+
+```css
+	div{
+		width: 200px;
+		height: 200px;
+		padding: 10px 20px 30px;
+		padding-right: 40px;
+		border: 1px solid #000;
+	}
+```
+
+
+答案：
+
+![](http://img.smyhvae.com/20170728_1048.png)
+
+
+
+	
+**题目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大属性，层叠掉了他们。
+
+盒子模型如下：
+
+
+![](http://img.smyhvae.com/20170728_1100.png)
+
+
+
+**题目3：**现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
+
+![](http://img.smyhvae.com/20170728_1401.png)
+
+
+答案：
+
+```
+	width:123px;
+	height:123px;
+	padding:20px 40px;
+	border:1px solid red;
+```
+
+**题目4：**现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
+
+![](http://img.smyhvae.com/20170728_1402.png)
+
+
+答案：
+
+```
+	width:123px;
+	height:123px;
+	padding:20px;
+	padding-right:40px;
+	border:1px solid red;
+
+```
+
+
+
+#### 一些元素，默认带有padding
+
+一些元素，默认带有`padding`，比如ul标签。如下：
+
+![](http://img.smyhvae.com/20170728_1413.png)
+
+
+上图显示，不加任何样式的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参考手册`得到）
+
+![](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: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;
+```
+
+效果如下：
+
+![](http://img.smyhvae.com/20170728_1516.png)
+
+
+
+（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;
+
+```
+
+
+工作中到底用什么？很简答：什么简单用什么。举例如下：
+
+![](http://img.smyhvae.com/20170728_1606.png)
+
+
+为了实现上方效果，写法如下：
+
+```
+border:10px solid red;
+border-right-color:blue;
+```
+
+![](http://img.smyhvae.com/20170728_1608.png)
+
+
+为了实现上方效果，写法如下：
+
+```
+border:10px solid red;
+border-style:solid dashed;
+```
+
+border可以没有：
+
+```
+border:none;
+```
+
+可以某一条边没有：
+
+```
+border-left: none;
+```
+
+也可以调整左边边框的宽度为0：
+
+```
+border-left-width: 0;
+```
+
+
+#### 举例：利用border属性画一个三角形（小技巧）
+
+步骤如下：
+
+（1）当我们设置盒子的width和height为0时，此时效果如下：
+
+![](http://img.smyhvae.com/20170728_1640.png)
+
+
+（2）然后将border的底部取消：
+
+![](http://img.smyhvae.com/20170728_1645.png)
+
+
+（3）最后设置border的左边和右边为白色：
+
+![](http://img.smyhvae.com/20170728_1649.png)
+
+
+这样，一个三角形就画好了。
+
+
+
+

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-盒子模型)
+