add files

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

@@ -15,7 +15,7 @@
 
 一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
 
-- width和height：内容的宽度、高度（不是盒子的宽度、高度）。
+- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
 - padding：内边距。
 - border：边框。
 - margin：外边距。
@@ -38,7 +38,7 @@
 注意：**宽度和真实占有宽度，不是一个概念！**来看下面这例子。
 
 
-### 标准盒子模型和IE盒子模型
+### 标准盒模型和IE盒模型
 
 > 我们目前所学习的知识中，以标准盒子模型为准。
 
@@ -53,8 +53,20 @@ IE盒子模型：
 上图显示：
 
 
- - 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：  <font color="#0000FF">**内容、内边距、边框、外边距**</font>。
- - 在 CSS的<font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。<font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
+在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
+
+
+- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
+- padding：内边距。
+- border：边框。
+- margin：外边距。
+
+CSS盒模型和IE盒模型的区别：
+
+ - 在 <font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
+
+ - <font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
+
 
  注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
 <br>
@@ -272,7 +284,6 @@ padding: 20px;
 ![](http://img.smyhvae.com/20170728_1100.png)
 
 
-
 **题目3**：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
 
 ![](http://img.smyhvae.com/20170728_1401.png)

02-CSS/07-浮动.md

@@ -804,9 +804,11 @@ _zoom:1;
 > 我们来讲一下浮动中和margin相关的知识。
 
 
-### margin塌陷
+### margin塌陷/margin重叠
 
-**标准文档流中，竖直方向的margin不叠加，以较大的为准**(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
+
+
+**标准文档流中，竖直方向的margin不叠加，取**较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
 
 ![](http://img.smyhvae.com/20170805_0904.png)
 
@@ -816,6 +818,37 @@ _zoom:1;
 
 
 
+
+### 善于使用父亲的padding，而不是儿子的margin
+
+我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p）
+
+```
+	<div>
+		<p></p>
+	</div>
+```
+
+上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象：
+
+![](http://img.smyhvae.com/20170806_1537.png)
+
+
+此时我们给父亲div加一个border属性，就正常了：
+
+![](http://img.smyhvae.com/20170806_1544.png)
+
+
+
+如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。
+
+**margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。**
+
+所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
+
+
+
+
 ### 盒子居中`margin:0 auto;`
 
 margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了：
@@ -853,6 +886,8 @@ text-align:left;     //没啥用，因为默认居左
 text-align:right;    //文本居右
 ```
 
+
+
 ### 善于使用父亲的padding，而不是儿子的margin
 
 我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p）