今天完成的事情：
1,昨天完成了任务7的第一个页面，发现了一点点小瑕疵等三个页面做完了再改；
2，完成了任务7第二个页面的80%进度；
3，因为第二个页面要求main部分文字以及雪碧图也要做到自适应大小，学习使用了rem，vw单位；

明天计划的事情：
完成任务7第二个页面以及第三个页面，优化一下任务7html以及css代码

遇到的问题：
1，任务6的这一部分

黄线无论设置为90%还是100%都会在拉伸或者缩小的时候都会出现这个情况，请教师兄之后说“捉鬼游戏”子元素的父元素width应设置成100%，然后两边的的灰色间距用margin实现，设置成90%的话该父元素的子元素宽度再用百分比设定就会出现这个问题.
2，开始做任务7的第二个页面
首先按部就班的做header与footer部分（暂时没插入音频），首先学会的是，，学会了用css画三角形。
然后从第二个页面开始使用rem来调节大小，其实rem跟px是一样的概念，都是固定的值，百度了下两者的区别就是兼容性的问题，好在现在兼容性的影响都比较小。
开始做main部分首先就是要实现main里的文字要实现自适应，能变大变小，div的宽高也要能自适应变大变小，宽度可以设置百分比，但是高度就无法设置百分比了，所以跟文字一样，就不能使用px或者rem单位了。
百度学习视口单位

根据CSS3规范，视口单位主要包括以下4个：

      1.vw：1vw等于视口宽度的1%。

      2.vh：1vh等于视口高度的1%。

      3.vmin：选取vw和vh中最小的那个。

      4.vmax：选取vw和vh中最大的那个。

由于画的都是正方形，所以暂且使用的都是vw单位。

然后是的布局，一如既往的使用弹性盒子布局，从热门问题的回答中知道了弹性盒子的新属性：flex，有grow，shrink，basis三个定义，分别是整体缩放，元素在宽度上的属性收缩，固定百分比缩放，此处用basis可以很简便的实现在矩形弹性盒子内区分两部分的大小。


后来是研究了半天的雪碧图部分 一个正方形结构如下
 
“main2”是四个小图标所在的弹性盒子，main2-1 main2-2 main2-3 main2-4分别是四个小图标。由于这四个小图标也要实现大小的自适应，用之前的设置固定宽高尺寸或者使用百分比来缩放图标的原始尺寸就都不行了，看到别人问题回答中使用相对与背景的百分比
百度了半天也看不懂这是啥意思，后来发现用vw单位设置小图标的尺寸问题就迎刃而解了。

为了给main1实现hover效果来显示main2，百度了好久找到了这个标签square是main1 mian2的父元素

但是给标签一个什么样的定义，能让main2平时的时候隐藏，点击main1的时候main2能显示，还是万能的百度找到了答案




收获：
在弹性盒子的使用上学会了高级的标签，hover效果上也有更深的心得。
大小单位上以后估计要抛弃px了，自适应上vw是真的很方便。