今天完成的事情：

写好了任务7的第二个页面，

学习了透明的两种使用方法  opacity和 RGBA。

加深了解了flex的概念：

容器存在水平的主轴 main axis和垂直的交叉轴cross axis，单个项目占据的主轴空间叫做main size，交叉轴空间叫做 cross size 。

可以设置在容器上的属性有6个：

flex-direction 属性决定主轴的方向。它有4个值，row（默认值）：主轴为水平方向，起点在左端。

row-reverse:主轴为水平方向，起点在右端。

column:主轴为垂直方向，起点在上沿。

column-reverse:主轴为垂直方向，起点在下沿。

flex-wrap属性：默认情况下，项目都排在一条线上，flex-wrap属性定义了在一条轴线排不下的情况下如何换行。

它的三个值：nowrap：不换行，也是默认的值。

wrap：换行，第一行在上方。

wrap-reverse:换行，但是第一行在下方。

flex-flow属性是flex-direction和flex-wrap的简写形式。

明天计划的事情：

继续学习flex的几个属性，加深记忆，完成任务7.

遇到的困难：

在做任务7的第二个页面时，头像下方的四个小图标要随页面缩放，因为用的是雪碧图，放大之后，会显示出其他的图片。

解决方法：

雪碧图的宽和高除以单个图片的宽和高，得出雪碧图是单个图片的多少倍，然后设置设置图片大小为：background-size: 1540% 1093.33%; 这个数值是我的雪碧图宽高除以单个图片的宽高后得到的。

原理：

当以单张图片的大小设置元素宽高时，定位之后呈现出的刚好是和元素大小相同的图片，所以当百分比单位设置元素宽高时，元素会随着页面放大，但是图片的大小始终是不变的，这就会导致显示出雪碧图上的其他图片。

background-size:属性以百分比设置时，是相对于元素的宽高，所以只要把雪碧图放大至合适的倍数时，无论元素怎么放大，雪碧图也会跟着同比例放大。

因为背景图片的放大尺寸是以元素的宽和高为基础再乘以我们设置好的倍数，这个倍数就是雪碧图的宽和高除以单个图片的宽高。

我用的单张图片是15*15px  我的雪碧图是231px*164px

231/15=15.4  164/15=10.9333  所以设置background-size: 1540% 1093.33%;

收获：

学会了opacity和 RGBA。 rgba在rgb的基础上添加的a是透明度的属性，值同样是0-1。

加深了对flex的认知，在垂直居中上有着很大的优势。

学会了雪碧图作为背景图片时的放大方法。