今天完成的事情：

1.完善了任务七。

2.回顾了前几个任务，发现当时有一些理解和应用错误。

3.学习理解了bootstrap的网格系统。浏览了轮播插件。

明天计划的事情：

1.用bootstrap着手写任务八。为了先完成上周的flag先挑一个好写的页面写完。。

遇到的问题：

1.复习没什么大问题，纠正了之前的一些概念错误。

2.初步理解框架与bootstrap的栅格系统。

收获：

1.布局的方案：基于盒装模型。根据各种标签的特点（块级元素、行内元素、行内块元素），使用display属性、float属性、position属性绝对定位和flex模型来灵活运用。不同的布局要思考那种方案更为合适。

2.Bootstrap框架是我接触的第一个框架。

既然是第一次接触，那么先看一下他的简介：Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

刚看到框架，其实是不理解的。基于html、css、JavaScript，也只是想到了web课程分为css和js，包含了这三个内容。在看了两个小时之后，感觉bootstrap像是一个库。也大概猜一下开源的意思。

我们在链接html和css时要在head部分声明 <link href=""> 之前写任务的时候会填上我们自己写的css样式的地址。

而在使用bootstrap框架的时候则要声明

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

那么就可以理解为这是一个写好了的css库存，里面定义了许多h5标签的样式、也有一些自己命名的类，可以帮助我们快速布局和描述元素。（当然不止css还有h5和js）开源的意思就是讲这个样式库放在网上了，所有人都可以调用这个样式，不用down在本地后再使用。

如果框架只是这样那就叫样式库。既然是框架，那就有约束性。也需要用框架的规则去写代码。例如布局来讲，bootstrap布局是依据网格系统。我猜测框架的规则是为了符合他里面css和js的使用条件，就像是要是用

vertical-align：middle必须要display：inline-block（或者inline）一样。我们在他制定的规则下写的代码就满足他定义的css与js的使用条件。因此学习不同的框架就是要学习框架制定的规则，和熟悉他定义的样式。

使用框架的目的就是更高效、快速、且页面风格一致（估计也比自己写的好看）。

3.bootstrap的网格系统主要是.container（容器、大概理解成div块吧）  .row（行） .column（列）  

他的规则是列在行内，行在容器里。一个容器里面的行可以嵌套，满足不同的需求。

一个行最多可以有12列。可以通过列的水平合并确定宽度。例如两列 每列水平占6列的位置，那么这两列就各占行的一半大。一列占3列的水平位置，另一列占9列、那么宽度比就是1比3，最多有12列。可以在列里面嵌套row。

4.发现了一个bootstrap精妙的地方：

container有一个水平方向的padding，宽度为15px

而row有一个负的水平margin也是15px

最后column也有一个15px的水平padding

column只能在row里。由于row的margin为-15px。那么column的border就碰到了container的border，并且他自己有个padding，所以里面的内容就碰不到container的border了。有15px的距离。而中间的column虽然border是挨在一起的，但是有两个padding，则内容是有30px的距离的。

综合下来，column的内容距离container左右边框15px，互相距离30px。Amazing！

有机会的话可以看一看bootstrap的源码。

最后附上任务七的总结