今天完成的事情：

基本完成任务9的响应式布局，进行细节方面的修复，以及对于自己响应式布局的忽略之处重新审视。

写了任务十的一部分代码，学习部分代码属性。

在设定

这一部分图标的时候，发现一个col自带的属性flex-basis，尝试变更或者取消该属性后，图标独占一行了。搜索了一下：

以下知识来自https://www.jianshu.com/p/bd7d1597d12d

flex-basis表示在flex items 被放入flex容器之前的大小，也就是items的理想或者假设大小，但是并不是其真实大小，其真实大小取决于flex容器的宽度。

个人理解：比如套用了bootstrap的栅格，设定的flex-basis值足够大的话就可以使col元素占用一行，因为col（默认）元素的max-width是100%，这个属性在使用栅格，响应式布局的时候修改有时候挺好用。

当flex-basis和width属性同时存在时，width属性不生效，flex item的宽度为flex-basis设置的宽度

只存在width情况，且flex items宽度和大于flex容器宽度

当flex空间不够时，由于flex-shrink的默认值为1，所以所有flex items容器等比例被压缩

当存在flex-basis，所有的flex item是宽度之和大于flex容器宽度

这种情况同width类似，都是在flex-shrink的作用下等比例缩小

max-width对flex items宽度的影响：max-width决定了flex items的最大宽度

min-width对flex items宽度的影响：min-width决定了flex items的最小宽度

明天计划的事情：

任务九各处细节完善好，然后提交并开始任务十。任务10尽量完成吧。

遇到的问题和收获：

在调试bootstrap上的样式的时候，遇到一个问题，若使用原本的设定会导致字体挤开导航栏上的其他项目。

解决办法：设定媒体查询，改变字体p 的样式，后面发现并不是字体高度引起的问题。在设定媒体查询时，导航栏在原本宽度设定了高度，应该更改导航栏的高度为auto，才不会导致内容挤开其他项目，后面变更了导航栏的容器属性，解决。

在写这一部分的响应式的时候，4没有箭头显得很格格不入，加入visible：hidden元素隐藏一个箭头图标在他右边（不使用display：none是因为display不占空间样式不好统一），设定缩小后显示。因为我的媒体查询写在了visible：hidden元素的前面，导致css优先级不足，所以没能好好的显示出来，也因此了解了媒体查询的样式设置应该写在原样式的后面

在写底部的字响应式的时候

使用的是ul无序列表，改变了li的display属性，导致小圆点消失，后面才发现不需要变更li的display属性也能添加长度。。

下面这一部分布局的代码套用的是bootstrap的栅格布局，

在同排的时候因为调整了高度看不出来，一旦产生缩放，就会有很明显的大小宽度高度对比，显得不美观，解决思路是统一图标的大小，

后面更改了flex：basis（理解为理想宽度）属性解决。

在职业介绍页的布局：

各处的间隙边框间距没有足够细致的调整，观感比较差。

发现自己布局的不足之处：很多需要间隔的地方，以及产生hover的地方被略过了，需要加强一下对于界面美观的概念。

设置汉堡菜单时，套用bootstrap的框架来进行布局，原理不懂的情况下修改其中的样式非常繁琐。

媒体查询的使用比较之前熟悉了不少，对于自己的不足之处也加强了解。