diff --git a/00-前端工具/VS Code.md b/00-前端工具/VS Code.md
new file mode 100644
index 0000000..7208393
--- /dev/null
+++ b/00-前端工具/VS Code.md
@@ -0,0 +1,5 @@
+
+
+问题：
+
+解决；You can kill the Microsoft.VSCode.Cpp.IntelliSense.Msvc process to save the file successfully. 也就是 IntelliSense 这个进程。
\ No newline at end of file
diff --git a/02-CSS/06-盒子模型.md b/02-CSS/06-CSS盒模型详解.md
similarity index 93%
rename from 02-CSS/06-盒子模型.md
rename to 02-CSS/06-CSS盒模型详解.md
index 702ebf1..9a7c062 100644
--- a/02-CSS/06-盒子模型.md
+++ b/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) 规定了元素处理元素的几种方式： **内容、内边距、边框、外边距**。
- - 在 CSS的**标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。**IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。
+在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
+
+
+- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
+- padding：内边距。
+- border：边框。
+- margin：外边距。
+
+CSS盒模型和IE盒模型的区别：
+
+ - 在 **标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
+
+ - **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。
+
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
@@ -272,7 +284,6 @@ padding: 20px;
-
**题目3**：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
diff --git a/02-CSS/07-浮动.md b/02-CSS/07-浮动.md
index f4c8c2e..0a5ac07 100644
--- a/02-CSS/07-浮动.md
+++ b/02-CSS/07-浮动.md
@@ -804,9 +804,11 @@ _zoom:1;
> 我们来讲一下浮动中和margin相关的知识。
-### margin塌陷
+### margin塌陷/margin重叠
-**标准文档流中，竖直方向的margin不叠加，以较大的为准**(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
+
+
+**标准文档流中，竖直方向的margin不叠加，取**较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
@@ -816,6 +818,37 @@ _zoom:1;
+
+### 善于使用父亲的padding，而不是儿子的margin
+
+我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p）
+
+```
+
+```
+
+上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象：
+
+
+
+
+此时我们给父亲div加一个border属性，就正常了：
+
+
+
+
+
+如果父亲没有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）
diff --git a/03-JavaScript/09-JavaScript基础：事件对象Event和冒泡.md b/03-JavaScript/09-JavaScript基础：事件对象Event和冒泡.md
index 2417d5e..9512609 100644
--- a/03-JavaScript/09-JavaScript基础：事件对象Event和冒泡.md
+++ b/03-JavaScript/09-JavaScript基础：事件对象Event和冒泡.md
@@ -5,14 +5,24 @@
> 以下是正文。
-## 绑定事件的两种方式
+## 绑定事件的两种方式/DOM事件的级别
我们在上一篇文章 [DOM操作详解](http://www.cnblogs.com/smyhvae/p/8366012.html) 中已经讲过事件的概念。这里讲一下注册事件的两种方式，我们以onclick事件为例。
-### 方式一：onclick
+### DOM0的写法：onclick
+
+
+
+```javascript
+ element.onclick = function () {
+
+ }
+```
+
举例：
+
```html
@@ -41,15 +51,24 @@
我们可以看到，这种绑定事件的方式，会层叠掉之前的事件。
-### 方式二：addEventListener
+### DOM2的写法：addEventListener
-addEventListener()里的参数：
+
+
+```javascript
+ element.addEventListener('click', function () {
+
+ }, false);
+```
+
+
+参数解释：
- 参数1：事件名(注意，没有on)
- 参数2：事件名(执行函数)
-- 参数3：事件名(捕获或者冒泡)
+- 参数3：**true表示捕获阶段触发，false表示冒泡阶段触发（默认）**。如果不写，则默认为false。【重要】
举例：
@@ -522,7 +541,7 @@ function scroll() { // 开始封装自己的scrollTop
暂略。
-## 事件冒泡
+## DOM事件流
事件传播的三个阶段是：事件捕获、事件冒泡和目标。
@@ -539,7 +558,95 @@ function scroll() { // 开始封装自己的scrollTop
PS：这个概念类似于 Android 里的 **touch 事件传递**。
-### 事件冒泡的概念
+### 事件捕获
+
+addEventListener可以捕获事件：
+
+```javascript
+ box1.addEventListener("click", function () {
+ alert("捕获 box3");
+ }, true);
+```
+
+上面的方法中，参数为true，代表事件在捕获阶段执行。
+
+代码演示：
+
+```javascript
+ //参数为true，代表捕获；参数为false或者不写参数，代表冒泡
+ box3.addEventListener("click", function () {
+ alert("捕获 child");
+ }, true);
+
+ box2.addEventListener("click", function () {
+ alert("捕获 father");
+ }, true);
+
+ box1.addEventListener("click", function () {
+ alert("捕获 grandfather");
+ }, true);
+
+ document.addEventListener("click", function () {
+ alert("捕获 body");
+ }, true);
+```
+
+效果演示：
+
+
+
+**说明**：捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。
+
+PS1：第一个接收到事件的对象是 **window**（有人会说body，有人会说html，这都是错误的）。
+
+PS2：JS中涉及到DOM对象时，有两个对象最常用：window、doucument。它们俩也是最先获取到事件的。
+
+
+事件捕获阶段的完整写法是：
+
+```javascript
+ window.addEventListener("click", function () {
+ alert("捕获 window");
+ }, true);
+
+ document.addEventListener("click", function () {
+ alert("捕获 document");
+ }, true);
+
+ document.documentElement.addEventListener("click", function () {
+ alert("捕获 html");
+ }, true);
+
+ document.body.addEventListener("click", function () {
+ alert("捕获 body");
+ }, true);
+
+ fatherBox.addEventListener("click", function () {
+ alert("捕获 father");
+ }, true);
+
+ childBox.addEventListener("click", function () {
+ alert("捕获 child");
+ }, true);
+
+```
+
+
+**补充一个知识点：**
+
+在 js中：
+
+- 如果想获取 `html`节点，方法是`document.documentElement`。
+
+- 如果想获取 `body` 节点，方法是：`document.body`。
+
+二者不要混淆了。
+
+
+
+
+
+### 事件冒泡
**事件冒泡**: 当一个元素上的事件被触发的时候（比如说鼠标点击了一个按钮），同样的事件将会在那个元素的所有**祖先元素**中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。
@@ -572,6 +679,8 @@ PS：这个概念类似于 Android 里的 **touch 事件传递**。
上图显示，当我点击儿子 box3的时候，它的父亲box2、box1、body都依次被触发了。即使我改变代码的顺序，也不会影响效果的顺序。
+当然，上面的代码中，我们用 addEventListener 这种 DOM2的写法也是可以的，但是第三个参数要写 false，或者不写。
+
**冒泡顺序**：
一般的浏览器: （除IE6.0之外的浏览器）
@@ -582,50 +691,13 @@ IE6.0：
- div -> body -> html -> document
-### 事件捕获
-
-addEventListener可以捕获事件：
-
-```javascript
- box1.addEventListener("click", function () {
- alert("捕获 box3");
- }, true);
-```
-
-上面的方法中，参数为true，代表捕获；参数为false或者不写参数，代表冒泡。
-
-代码演示：
-
-```javascript
- //参数为true，代表捕获；参数为false或者不写参数，代表冒泡
- box3.addEventListener("click", function () {
- alert("捕获 child");
- }, true);
-
- box2.addEventListener("click", function () {
- alert("捕获 father");
- }, true);
-
- box1.addEventListener("click", function () {
- alert("捕获 grandfather");
- }, true);
-
- document.addEventListener("click", function () {
- alert("捕获 body");
- }, true);
-```
-
-效果演示：
-
-
-
### 不是所有的事件都能冒泡
以下事件不冒泡：blur、focus、load、unload、onmouseenter、onmouseleave。意思是，事件不会往父元素那里传递。
我们检查一个元素是否会冒泡，可以通过事件的以下参数：
-```
+```javascript
event.bubbles
```
@@ -646,19 +718,19 @@ addEventListener可以捕获事件：
w3c的方法：（火狐、谷歌、IE11）
-```javascipt
+```javascript
event.stopPropagation();
```
IE10以下则是：
-```javascipt
+```javascript
event.cancelBubble = true
```
兼容代码如下：
-```javascipt
+```javascript
box3.onclick = function (event) {
alert("child");
@@ -680,13 +752,71 @@ event.cancelBubble = true
事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。
-比如说有一个列表 ul，列表之中有大量的列表项 li，我们需要在点击列表项li的时候响应一个事件。如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。
+比如说有一个列表 ul，列表之中有大量的列表项 li：
-因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件的时候再去匹配判断目标元素。
+```html
+
+ - Item 1
+ - Item 2
+ - Item 3
+ - Item 4
+ - Item 5
+ - Item 6
+
+```
-所以事件委托可以减少大量的内存消耗，节约效率。
-事件委托的参考链接：[JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815)
+当我们的鼠标移到Li上的时候，需要获取此Li的相关信息并飘出悬浮窗以显示详细信息，或者当某个Li被点击的时候需要触发相应的处理事件。我们通常的写法，是为每个Li都绑定类似onMouseOver或者onClick之类的事件监听：
+
+
+```javascript
+ //每个 li 中做的事情
+ function addListeners4Li(liNode){
+ liNode.onclick = function clickHandler(){...};
+ liNode.onmouseover = function mouseOverHandler(){...}
+ }
+
+ window.onload = function(){
+ var ulNode = document.getElementById("parent-list");
+ var liNodes = ulNode.getElementByTagName("Li");
+ for(var i=0, l = liNodes.length; i < l; i++){
+ addListeners4Li(liNodes[i]);
+ }
+ }
+```
+
+但是，上面的做法会消耗内存和性能。
+
+
+因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 `ul` 上，然后在执行事件的时候再去匹配判断目标元素。如下：
+
+
+
+```javascript
+ // 获取父节点，并为它注册click事件。 false 表示事件在冒泡阶段触发（默认）
+ document.getElementById("parent-list").addEventListener("click", function (e) {
+ // event.target 代表的是子元素。toUpperCase 指的是转换为大写字母
+ if (e.target && e.target.nodeName.toUpperCase == "LI") {
+ // 真正的处理过程在这里
+ console.log("List item ", e.target.id, " was clicked!");
+ }
+ }, false);
+
+```
+
+
+上方代码，为父节点注册click事件，当子节点被点击的时候，click事件会从子节点开始**向上冒泡**。**父节点捕获到事件**之后，开始执行方法体里的内容：通过判断 e.target 拿到了被点击的子节点li。从而可以获取到相应的信息，并作处理。
+
+换而言之，事件是在父节点上注册的，参数为false，说明事件是在冒泡阶段触发（往上传递），那就只有父节点能拿到事件，子节点是不可能拿到事件的。
+
+所以事件委托可以减少大量的内存消耗，提高效率。
+
+事件委托的参考链接：
+
+- [荐 | JavaScript事件代理和委托（Delegation）](https://www.cnblogs.com/owenChen/archive/2013/02/18/2915521.html)
+
+- [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815)
+
## 我的公众号
diff --git a/06-开发积累/00-准备.md b/06-前端基础/00-准备.md
similarity index 100%
rename from 06-开发积累/00-准备.md
rename to 06-前端基础/00-准备.md
diff --git a/06-开发积累/01-页面布局.md b/06-前端基础/01-页面布局.md
similarity index 99%
rename from 06-开发积累/01-页面布局.md
rename to 06-前端基础/01-页面布局.md
index fc2cf7f..bf6daa7 100644
--- a/06-开发积累/01-页面布局.md
+++ b/06-前端基础/01-页面布局.md
@@ -483,23 +483,6 @@ PS：面试提到网格布局，说明我们对新技术是有追求的。
答案是：**flex 布局和表格布局可以通用**，其他三个布局都不能用了。
-
-### 总结
-
-涉及到的知识点：
-
-
-（1）语义化掌握到位：每个区域用`section`、`article`代表容器、`div`代表块儿。如果通篇都用 div，那就是语义化没掌握好。
-
-（2）页面布局理解深刻。
-
-（3）CSS基础知识扎实。
-
-（4）思维灵活且积极上进。题目中可以通过`网格布局`来体现。
-
-（5）代码书写规范。注意命名。以及，上面的代码中，没有一行代码是多的。
-
-
### 页面布局的变通
20180305_1931.png
@@ -509,6 +492,22 @@ PS：面试提到网格布局，说明我们对新技术是有追求的。
+### 总结
+
+涉及到的知识点：
+
+（1）语义化掌握到位：每个区域用`section`、`article`代表容器、`div`代表块儿。如果通篇都用 div，那就是语义化没掌握好。
+
+（2）页面布局理解深刻。
+
+（3）CSS基础知识扎实。
+
+（4）思维灵活且积极上进。题目中可以通过`网格布局`来体现。
+
+（5）代码书写规范。注意命名。上面的代码中，没有一行代码是多的。
+
+
+
diff --git a/06-前端基础/02-CSS盒模型的深度思考及BFC.md b/06-前端基础/02-CSS盒模型的深度思考及BFC.md
new file mode 100644
index 0000000..329593c
--- /dev/null
+++ b/06-前端基础/02-CSS盒模型的深度思考及BFC.md
@@ -0,0 +1,474 @@
+
+
+
+> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
+
+> 以下是正文。
+
+
+
+## 题目：谈一谈你对CSS盒模型的认识
+
+专业的面试，一定会问 CSS 盒模型。对于这个题目，我们要回答一下几个方面：
+
+（1）基本概念：content、padding、margin。
+
+（2）标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。
+
+（3）CSS如何设置这两种模型（即：如何设置某个盒子为其中一个模型）？如果回答了上面的第二条，还会继续追问这一条。
+
+（4）JS如何设置、获取盒模型对应的宽和高？这一步，已经有很多人答不上来了。
+
+（5）实例题：根据盒模型解释**边距重叠**。
+
+前四个方面是逐渐递增，第五个方面，却鲜有人知。
+
+（6）BFC（边距重叠解决方案）或IFC。
+
+如果能回答第五条，就会引出第六条。BFC是面试频率较高的。
+
+**总结**：以上几点，从上到下，知识点逐渐递增，知识面从理论、CSS、JS，又回到CSS理论。
+
+接下来，我们把上面的六条，依次讲解。
+
+
+## 标准盒模型和IE盒子模型
+
+
+标准盒子模型：
+
+
+
+IE盒子模型：
+
+
+
+上图显示：
+
+
+在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
+
+
+- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
+- padding：内边距。
+- border：边框。
+- margin：外边距。
+
+CSS盒模型和IE盒模型的区别：
+
+ - 在 **标准盒子模型**中，**width 和 height 指的是内容区域**的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
+
+ - **IE盒子模型**中，**width 和 height 指的是内容区域+border+padding**的宽度和高度。
+
+
+
+## CSS如何设置这两种模型
+
+
+代码如下：
+
+
+```javascript
+ /* 设置当前盒子为 标准盒模型（默认） */
+ box-sizing: content-box;
+
+ /* 设置当前盒子为 IE盒模型 */
+ box-sizing: border-box;
+```
+
+
+备注：盒子默认为标准盒模型。
+
+
+## JS如何设置、获取盒模型对应的宽和高
+
+
+### 方式一：通过DOM节点的 style 样式获取
+
+
+```javascript
+ element.style.width/height;
+```
+
+缺点：通过这种方式，只能获取**行内样式**，不能获取`内嵌`的样式和`外链`的样式。
+
+这种方式有局限性，但应该了解。
+
+### 方式二（IE独有的）
+
+
+```javascript
+ element.currentStyle.width/height;
+```
+
+获取到的即时运行完之后的宽高（三种css样式都可以获取）。但这种方式只有IE独有。
+
+
+### 方式三（通用型）
+
+
+```javascript
+ window.getComputedStyle(element).width/height;
+```
+
+
+方式三和方式二一样。只不过，方式三能兼容 Chrome、火狐。是通用型方式。
+
+### 方式4
+
+
+```javascript
+ element.getBoundingClientRect().width/height;
+```
+
+此 api 的作用是：获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。
+
+此 api 可以拿到四个属性：left、top、width、height。
+
+**总结：**
+
+上面的四种方式，要求能说出来区别，以及哪个的通用型更强。
+
+
+## margin塌陷/margin重叠
+
+
+**标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin**(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。
+
+PS：如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有margin重叠的现象的。
+
+
+我们来看几个例子。
+
+
+### 兄弟元素之间
+
+如下图所示：
+
+
+
+
+### 子元素和父元素之间
+
+
+```html
+
+
+
+
+ Document
+
+
+
+
+
+
+
+```
+
+上面的代码中，儿子的height是 100px，magin-top 是10px。注意，此时父亲的 height 是100，而不是110。因为儿子和父亲在竖直方向上，共一个margin。
+
+儿子这个盒子：
+
+
+
+父亲这个盒子：
+
+
+
+
+上方代码中，如果我们给父亲设置一个属性：`overflow: hidden`，就可以避免这个问题，此时父亲的高度是110px，这个用到的就是BFC（下一段讲解）。
+
+
+### 善于使用父亲的padding，而不是儿子的margin
+
+> 其实，这一小段讲的内容与上一小段相同，都是讲父子之间的margin重叠。
+
+我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p）
+
+```
+
+```
+
+上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象：
+
+
+
+
+此时我们给父亲div加一个border属性，就正常了：
+
+
+
+
+如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。
+
+**margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。**
+
+所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
+
+
+## BFC（边距重叠解决方案）
+
+### BFC的概念
+
+BFC（Block Formatting Context）：块级格式化上下文。你可以把它理解成一个独立的区域。
+
+另外还有个概念叫IFC。不过，BFC问得更多。
+
+### BFC 的原理/BFC的布局规则【非常重要】
+
+BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：
+
+- （1）BFC **里面的**元素，在垂直方向，**边距会发生重叠**。
+
+- （2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看`举例1`）
+
+- （3）**BFC区域不与旁边的`float box`区域重叠**。（可以用来清除浮动带来的影响）。（稍后看`举例2`）
+
+- （4）计算BFC的高度时，浮动的子元素也参与计算。（稍后看`举例3`）
+
+### 如何生成BFC
+
+有以下几种方法：
+
+- 方法1：overflow: 不为vidible，可以让属性是 hidden、auto。【最常用】
+
+- 方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
+
+- 方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是`absolute`或`fixed`，也就生成了一个BFC。
+
+- 方法4：display为inline-block, table-cell, table-caption, flex, inline-flex
+
+参考链接：
+
+- [BFC原理详解](https://segmentfault.com/a/1190000006740129)
+
+
+- [BFC详解](https://www.jianshu.com/p/bf927bc1bed4)
+
+
+- [前端精选文摘：BFC 神奇背后的原理](https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html)
+
+
+下面来看几个例子，看看如何生成BFC。
+
+
+
+### BFC 的应用
+
+
+**举例1：**解决 margin 重叠
+
+当父元素和子元素发生 margin 重叠时，解决办法：**给子元素增加一个父元素，给这个父元素创建BFC**。
+
+比如说，针对下面这样一个 div 结构：
+
+
+```html
+
+```
+
+上面的div结构中，如果父元素和子元素发生margin重叠，我们可以给子元素创建一个 BFC，就解决了：
+
+
+```html
+
+```
+
+因为**第二条：BFC区域是一个独立的区域，不会影响外面的元素**。
+
+
+**举例2**：BFC区域不与float区域重叠：
+
+针对下面这样一个div结构；
+
+```html
+
+
+
+
+ Document
+
+
+
+
+
+
+ 左侧，生命壹号
+
+
+ 右侧，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
+
+
+
+
+
+```
+
+效果如下：
+
+
+
+上图中，由于右侧标准流里的元素，比左侧浮动的元素要高，导致右侧有一部分会跑到左边的下面去。
+
+**如果要解决这个问题，可以将右侧的元素创建BFC**，因为**第三条：BFC区域不与`float box`区域重叠**。解决办法如下：（将right区域添加overflow属性）
+
+```html
+
+ 右侧，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，smyhvae，
+
+```
+
+
+
+
+上图表明，解决之后，`father-layout`的背景色显现出来了，说明问题解决了。
+
+
+
+**举例3：**清除浮动
+
+现在有下面这样的结构：
+
+
+```html
+
+
+
+
+ Document
+
+
+
+
+
+
+
+```
+
+效果如下：
+
+
+
+上面的代码中，儿子浮动了，但由于父亲没有设置高度，导致看不到父亲的背景色（此时父亲的高度为0）。正所谓**有高度的盒子，才能关住浮动**。
+
+如果想要清除浮动带来的影响，方法一是给父亲设置高度，然后采用隔墙法。方法二是 BFC：给父亲增加 `overflow=hidden`属性即可， 增加之后，效果如下：
+
+
+
+为什么父元素成为BFC之后，就有了高度呢？这就回到了**第四条：计算BFC的高度时，浮动元素也参与计算**。意思是，**在计算BFC的高度时，子元素的float box也会参与计算**。
+
+
+
+## 我的公众号
+
+想学习**代码之外的软技能**？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
+
+扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+```
+
+
+
+
+```javascript
+
+```
+
+
+
+
+
+
+```javascript
+
+```
+
+
+
+
+
+
+
+```javascript
+
+```
+
diff --git a/06-前端基础/03-DOM事件的总结.md b/06-前端基础/03-DOM事件的总结.md
new file mode 100644
index 0000000..1bacf6b
--- /dev/null
+++ b/06-前端基础/03-DOM事件的总结.md
@@ -0,0 +1,435 @@
+
+
+## 前言
+
+
+要学习事件的基础内容，请看先本人的这篇基础文章：
+
+- [JavaScript基础：事件对象Event和冒泡](https://github.com/smyhvae/Web/blob/master/03-JavaScript/09-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9A%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1Event%E5%92%8C%E5%86%92%E6%B3%A1.md)
+
+
+知识难度不大，只是大家没有系统地学习。
+
+**知识点主要包括以下几个方面：**
+
+- 基本概念：DOM事件的级别
+
+面试不会直接问你，DOM有几个级别。但会在题目中体现：“请用DOM2 ....”。
+
+
+- DOM事件模型、DOM事件流
+
+面试官如果问你“**DOM事件模型**”，你不一定知道怎么回事。其实说的就是**捕获和冒泡**。
+
+**DOM事件流**，指的是事件传递的**三个阶段**。
+
+- 描述DOM事件捕获的具体流程
+
+讲的是事件的传递顺序。参数为false（默认）、参数为true，各自代表事件在什么阶段触发。
+
+能回答出来的人，寥寥无几。也许有些人可以说出一大半，但是一字不落的人，极少。
+
+- Event对象的常见应用（Event的常用api方法）
+
+DOM事件的知识点，一方面包括事件的流程；另一方面就是：怎么去注册事件，也就是监听用户的交互行为。第三点：在响应时，Event对象是非常重要的。
+
+- 自定义事件（非常重要）
+
+一般人可以讲出事件和注册事件，但是如果让你讲**自定义事件**，能知道的人，就更少了。
+
+- 事件委托
+
+业务中经常用到。
+
+下面分别讲解。
+
+
+## DOM事件的级别
+
+DOM事件的级别，准确来说，是**DOM标准**定义的级别。包括：
+
+**DOM0的写法：**
+
+
+```javascript
+ element.onclick = function () {
+
+ }
+```
+
+
+上面的代码是在 js 中的写法；如果要在html中写，写法是：在onclick属性中，加 js 语句。
+
+
+**DOM2的写法：**
+
+
+```javascript
+ element.addEventListener('click', function () {
+
+ }, false);
+```
+
+【重要】上面的第三参数中，**true**表示事件在**捕获阶段**触发，**false**表示事件在**冒泡阶段**触发（默认）。如果不写，则默认为false。
+
+
+**DOM3的写法：**
+
+
+```javascript
+ element.addEventListener('keyup', function () {
+
+ }, false);
+```
+
+DOM3中，增加了很多事件类型，比如鼠标事件、键盘事件等。
+
+
+PS：为何事件没有DOM1的写法呢？因为，DOM1标准制定的时候，没有涉及与事件相关的内容。
+
+**总结：**关于“DOM事件的级别”，能回答出以上内容即可，不会出题目让你做。
+
+
+## DOM事件模型、DOM事件流
+
+### DOM事件模型
+
+DOM事件模型讲的就是**捕获和冒泡**，一般人都能回答出来。
+
+- 捕获：从上往下。
+
+- 冒泡：从下（目标元素）往上。
+
+### DOM事件流
+
+DOM事件流讲的就是：浏览器在于当前页面做交互时，这个事件是怎么传递到页面上的。
+
+类似于Android里面的事件传递。
+
+完整的事件流，分三个阶段：
+
+- （1）捕获：从 window 对象传到 目标元素。
+
+- （2）目标阶段：事件通过捕获，到达目标元素，这个阶段就是目标阶段。
+
+- （3）冒泡：从**目标元素**传到 Window 对象。
+
+
+
+
+20180306_1058.png
+
+
+## 描述DOM事件捕获的具体流程
+
+> 很少有人能说完整。
+
+### 捕获的流程
+
+
+20180306_1103.png
+
+
+**说明**：捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。
+
+PS1：第一个接收到事件的对象是 **window**（有人会说body，有人会说html，这都是错误的）。
+
+PS2：JS中涉及到DOM对象时，有两个对象最常用：window、doucument。它们俩也是最先获取到事件的。
+
+代码如下：
+
+
+```javascript
+ window.addEventListener("click", function () {
+ alert("捕获 window");
+ }, true);
+
+ document.addEventListener("click", function () {
+ alert("捕获 document");
+ }, true);
+
+ document.documentElement.addEventListener("click", function () {
+ alert("捕获 html");
+ }, true);
+
+ document.body.addEventListener("click", function () {
+ alert("捕获 body");
+ }, true);
+
+ fatherBox.addEventListener("click", function () {
+ alert("捕获 father");
+ }, true);
+
+ childBox.addEventListener("click", function () {
+ alert("捕获 child");
+ }, true);
+
+```
+
+
+**补充一个知识点：**
+
+在 js中：
+
+- 如果想获取 `body` 节点，方法是：`document.body`；
+
+- 但是，如果想获取 `html`节点，方法是`document.documentElement`。
+
+
+### 冒泡的流程
+
+与捕获的流程相反
+
+
+## Event对象的常见 api 方法
+
+用户做的是什么操作（比如，是敲键盘了，还是点击鼠标了），这些事件基本都是通过Event对象拿到的。这些都比较简单，我们就不讲了。我们来看看下面这几个方法：
+
+### 方法一
+
+```javascript
+ event.preventDefault();
+```
+
+解释：阻止默认事件。
+
+比如，已知``标签绑定了click事件，此时，如果给``设置了这个方法，就阻止了链接的默认跳转。
+
+### 方法二：阻止冒泡
+
+这个在业务中很常见。
+
+有的时候，业务中不需要事件进行冒泡。比如说，业务这样要求：单击子元素做事件A，单击父元素做事件B，如果不阻止冒泡的话，出现的问题是：单击子元素时，子元素和父元素都会做事件A。这个时候，就要用到阻止冒泡了。
+
+
+w3c的方法：（火狐、谷歌、IE11）
+
+```javascript
+ event.stopPropagation();
+```
+
+IE10以下则是：
+
+```javascript
+ event.cancelBubble = true;
+```
+
+兼容代码如下：
+
+```javascript
+ box3.onclick = function (event) {
+
+ alert("child");
+
+ //阻止冒泡
+ event = event || window.event;
+
+ if (event && event.stopPropagation) {
+ event.stopPropagation();
+ } else {
+ event.cancelBubble = true;
+ }
+ }
+```
+
+上方代码中，我们对box3进行了阻止冒泡，产生的效果是：事件不会继续传递到 father、grandfather、body了。
+
+
+### 方法三：设置事件优先级
+
+
+```javascript
+ event.stopImmediatePropagation();
+
+```
+
+这个方法比较长，一般人没听说过。解释如下：
+
+比如说，我用addEventListener给某按钮同时注册了事件A、事件B。此时，如果我单击按钮，就会依次执行事件A和事件B。现在要求：单击按钮时，只执行事件A，不执行事件B。该怎么做呢？这是时候，就可以用到`stopImmediatePropagation`方法了。做法是：在事件A的响应函数中加入这句话。
+
+大家要记住 event 有这个方法。
+
+### 属性4、属性5（事件委托中用到）
+
+
+```javascript
+
+ event.currentTarget //当前所绑定的事件对象。在事件委托中，指的是【父元素】。
+
+ event.target //当前被点击的元素。在事件委托中，指的是【子元素】。
+
+```
+
+上面这两个属性，在事件委托中经常用到。
+
+
+**总结**：上面这几项，非常重要，但是容易弄混淆。
+
+
+## 自定义事件
+
+自定义事件的代码如下：
+
+
+```javascript
+ var myEvent = new Event('clickTest');
+ element.addEventListener('clickTest', function () {
+ console.log('smyhvae');
+ });
+
+ //元素注册事件
+ element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
+
+```
+
+上面这个事件是定义完了之后，就直接自动触发了。在正常的业务中，这个事件一般是和别的事件结合用的。比如延时器设置按钮的动作：
+
+```javascript
+ var myEvent = new Event('clickTest');
+
+ element.addEventListener('clickTest', function () {
+ console.log('smyhvae');
+ });
+
+ setTimeout(function () {
+ element.dispatchEvent(myEvent); //注意，参数是写事件对象 myEvent，不是写 事件名 clickTest
+ }, 1000);
+```
+
+
+
+
+
+
+## 事件委托
+
+参考本人这篇文章的最后一段：
+
+
+- [JavaScript基础：事件对象Event和冒泡](https://github.com/smyhvae/Web/blob/master/03-JavaScript/09-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9A%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1Event%E5%92%8C%E5%86%92%E6%B3%A1.md)
+
+
+
+
+
+
+
+
+
+```javascript
+
+```
+
+
+
+
+
+
+
+```javascript
+
+```
+
+
+
+
+
+
+
+
+```javascript
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+```
+
+
+
+
diff --git a/06-前端基础/04-HTTP协议.md b/06-前端基础/04-HTTP协议.md
new file mode 100644
index 0000000..3d87dc7
--- /dev/null
+++ b/06-前端基础/04-HTTP协议.md
@@ -0,0 +1,25 @@
+
+
+一面中，如果有笔试，考HTTP协议的可能性较大。
+
+## 前言
+
+一面内容：
+
+- HTTP协议的主要特点
+
+- HTTP报文的组成部分
+
+- HTTP方法
+
+- get 和 post的区别
+
+- HTTP状态码
+
+- 什么是持久连接
+
+- 什么是管线化
+
+
+
+二面内容；
\ No newline at end of file
diff --git a/06-开发积累/11-其他.md b/06-前端基础/11-其他.md
similarity index 100%
rename from 06-开发积累/11-其他.md
rename to 06-前端基础/11-其他.md
diff --git a/06-开发积累/11-计算机网络.md b/06-前端基础/11-计算机网络.md
similarity index 100%
rename from 06-开发积累/11-计算机网络.md
rename to 06-前端基础/11-计算机网络.md
diff --git a/06-开发积累/web安全.md b/06-前端基础/web安全.md
similarity index 100%
rename from 06-开发积累/web安全.md
rename to 06-前端基础/web安全.md
diff --git a/06-开发积累/02-CSS盒模型.md b/06-开发积累/02-CSS盒模型.md
deleted file mode 100644
index 67d9fb5..0000000
--- a/06-开发积累/02-CSS盒模型.md
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
-
-## 题目：谈一谈你对CSS盒模型的认识
-
-专业的面试，一定会问 CSS 盒模型。对于这个题目，我们要回答一下几个方面：
-
-（1）基本概念：content、padding、margin。
-
-（2）标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。
-
-
-（3）
-
-
-
-
-
-
-
-
-
-
-
diff --git a/13-前端面试/网友面经/面经链接推荐.md b/13-前端面试/网友面经/面经链接推荐.md
index 5143e97..b9e0cb8 100644
--- a/13-前端面试/网友面经/面经链接推荐.md
+++ b/13-前端面试/网友面经/面经链接推荐.md
@@ -47,7 +47,12 @@
-
+### 2018-03-06
+
+- [我遇到的前端面试题2017](https://segmentfault.com/a/1190000011091907)
+
+
+里面有很多面试跳槽里的内容。