今日完成：1  了解了bootstrap4+的更新亮点，确认了昨天的结论，即col-xs-被删除，并且默认当页面宽度小于576px时，

                     页面内元素自动分行。

                      官网地址：https://blog.getbootstrap.com/page3/

       2   确认了position：absolute的特殊性，之前一直以为absolute是相对于body，

       信息来源网址：http://zh.learnlayout.com/position.html

    3  下载bootstrap4.0源码并理解一小部分源码的样式

自己阅读加参考官网解释，初步理解了nav中（.nav   .nav-link    .nav-tables   .nav-item）的样式

4 在查看源码时发现，里面有一些特殊的符号，比如 “+”，“~” 以及 “>”，我还在纳闷，然后在群里问的时候，师弟告诉我说，这是父子选择器，我当时还在疑惑，之前有过印象是关于后代选择器的，就是直接空一格就可以了，

然后我就直接搜索父子选择器和后代选择器，然后就查到了一共四种选择器

第一种：‍‍当使用  --       /*  "--"代表一个空格,更确切的说是一个或多个的空白字符  */      选择符 连接两个元素时使得该选择器可以只匹配那些由第一个元素作为祖先元素的所有第二个元素(后代元素) . 后代选择器与 子选择器 很相似, 但是后代选择器不需要相匹配元素之间要有严格的父子关系.

代码如下：

css              

    span { background-color: white; 
      }
div span { background-color: DodgerBlue;
      }

html

<div> 
 <span>Span 1.    
   <span>Span 2.</span> 
 </span>
</div>
<span>Span 3.</span>

运行结果

Span 1. Span 2.
Span 3.

第二种：‍‍当使用  “>” 选择符分隔两个元素时,它只会匹配那些作为第一个元素的直接后代(子元素)的第二元素. 与之相比, 当两个元素由 后代选择器 相连时, 它表示匹配存在的所有由第一个元素作为祖先元素(但不一定是父元素)的第二个元素, 无论它在 DOM 中"跳跃" 多少次.

css

      span { background-color: white;
 }
div > span {
  background-color: DodgerBlue;
}

html

<div> 
 <span>Span 1. In the div.  
  <span>Span 2. In the span that's in thediv.</span>
  </span>
</div>
<span>Span 3. Not in a div at all</span>

运行结果

Span 1. In the div. Span 2. In the span that's in the div.
Span 3. Not in a div at all.

‍‍第三种：后续兄弟选择符，

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p>

css

div~p
{
 background-color:yellow;
}

html

<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<p>My best friend is Mickey.</p>
<p>I will not be styled.</p>

运行结果

之前段落，不会添加背景颜色。

段落 3。不在 div 中。

段落 4。不在 div 中。

‍‍第四种：

‍‍‍‍相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

css

div+p
{
 background-color:yellow;
}

html

<div>

<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>

运行结果

My best friend is Mickey.

I will not be styled.

在查找资料的时候发现MDN和菜鸟教程都有讲这个问题，但是推荐大家去看菜鸟教程，因为菜鸟上面要更详细，且个人认为在相邻兄弟选择器和后续相邻兄弟选择器方面，菜鸟教程的命名更贴切，MDN上面的完全不知所云，

所用的案例太短，完全看不出来。

明天的计划：

将任务八精简，把能用自适应实现的就把媒体查询的删除，以自适应为主