今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

了解了清除float的重要性

完成任务14的1

尝试用sass重写bootstrap4的网格系统
明天计划的事情：（一定要写非常细致的内容） 

完成网格系统

完成任务14，15

看一下js内容
遇到的问题：（遇到什么困难，怎么解决的） 

在做完第一个页面，看这塌下来的高度只在是烦，

终于解决了昨天那个高度撑不起的问题，不断测试后发现，float元素不能撑起，而自己做的栅格话未清除浮动。

这样就明白了，百度来几种方法。但是这种还是很麻烦

1、增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。
<div id="main">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
2、增加一个容器，在代码中存在，但在视觉中不可见。
<div id="main">
<div id="content"></div>
<div style="height:1px; margin-top:-1px;clear:both;overflow:hidden;"></div>
</div>
3、增加一个BR并设置样式为clear:both。
<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>

对比bootstrap后发现 这么一段 通过伪元素来清除浮动。晚上看看能不能写入sass

.btn-group-vertical>.btn-group:after, .btn-toolbar:after, .clearfix:after, .container-fluid:after, .container:after, .dl-horizontal dd:after, .form-horizontal .form-group:after, .modal-footer:after, .modal-header:after, .nav:after, .navbar-collapse:after, .navbar-header:after, .navbar:after, .pager:after, .panel-body:after, .row:after {

    clear: both;

}

收获：（通过今天的学习，学到了什么知识）

bootstrap4

　　Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子） 而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。 如

网格类

Bootstrap 4 网格系统有以下 5 个类:

    .col- 针对所有设备

    .col-sm- 平板 - 屏幕宽度等于或大于 576px

    .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)

    .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)

    .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

 这里多增加了一个xl，

网格系统规则

Bootstrap4 网格系统规则:

　　网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。

　　使用行来创建水平的列组。

　　内容需要放置在列中，并且只有列可以是行的直接子节点。

　　预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。

　　列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。

　　网格列是通过跨越指定的 12 个可用列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。

网格系统规则

Bootstrap4 网格系统规则:

　　网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。

　　使用行来创建水平的列组。

　　内容需要放置在列中，并且只有列可以是行的直接子节点。

　　预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。

　　列通过填充创建列内容之间的间隙。 这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。

　　网格列是通过跨越指定的 12 个可用列来创建。 例如，设置三个相等的列，需要使用用三个.col-sm-4 来设置。

偏移列

偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。

为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。

例如：.offset-md-4 是把.col-md-4 往右移了四列格。

<div class="row">

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>

</div>

<div class="row">

  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>

  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>

</div>

<div class="row">

  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>

</div>

总体上变化不是很大，尝试用sass书写一下