今天完成的事情：今天完成了任务八和九，主要针对各尺寸进行了微调，具体情况我写在问题里。
明天计划的事情：复习以下表单标签，编写任务十。 
遇到的问题：

如上图 我先说一下布局，这三个介绍栏是.col的div，外层是父级.row的div，介绍栏之间有间距，起初我是给col加mergin 但是那样会把同列col挤到下一行，给col加padding 就会变白色而不是灰色，所以我在col和介绍栏之间加了一个a div，并给它设置了margin：15px，这样间距是显示出来了，但是最上面有一条横线，它是与最外层.container-fluid div的content宽度相同的，因为设置了adiv的margin 所以介绍栏两边边框 比上边横线短：

而col默认padding 15px；原本设置的白色也交给了adiv，自己则变成了默认的灰色，所以现在介绍栏以外是两层共30px；

这里就要提到row默认的margin-left/right:-15px;他是为了最两边的col能够呈现紧贴fluid的content边界，负margin是会相对加宽row的宽度，但是父级不会变化，从而使两边的col padding进入加宽区域，呈现了紧贴fluid边界的假象：

这时候总边界变成了30px，所以我把row加到了margin：-30px；这时候问题就出现了：

我在可见屏幕缩小到370px的时候，fluid padding:0;然后就出现了这个问题，根本原因就是之前说的假象就是col 与fluid的padding重叠，现在fluid padding归零以后，左面负margin向左移动，隐藏在了边界外，而右面则会显示出来。

其实解决方法很简单，只要给fluid 设置 over-flow：hidden。主要还是要充分理解负margin。

收获：加深理解负margin

进度：task8/9

任务总结：

任务名称：CSS=TASK8/9

成果链接：https://gu1354181433.github.io/learn/css8/task8-1.html

任务耗时：2018.11.5~2018.11.10； 5天 延期一天

技能脑图：

个人脑图：

官方脑图：

任务总结：

1.任务进度缓慢，由于再补一些与bootstrap4无关的的理论知识，耽误了时间，反而bootstrap4用起来了更慢了。

2.脑图对比.

3.任务八难度明显要比之前高，不过很好的锻炼了用bootstrap4布局，还有用到的重要知识点：

媒体查询，它是响应式的基础原理，通过设定页面显示的不同尺寸，来设定页面的一些属性，从而让页面在不同尺寸都有较好的显示效果。

阴影标签：box-shadow 通过设定元素阴影的偏移方向，阴影尺寸，阴影颜色，模糊的范围，阴影的朝向，来实现阴影的各种效果。

负margin：在bootstrap4中 默认row的margin-left/right ：-15px，他是为了相对加宽row来实现，或者说缩小了他的外边界，从而使他的父级.container向内收缩 让自带的内边距与.col内边距重合 形成了.col紧贴.container的假象。但是如果.container没有内边距，由于页面的文档流是从左向右从上至下，所以超出左上的部分不会显示，但是超出右面就会显示，这时候就要用到over-flow：hidden，来隐藏多余的那部分。