今天完成的事

1.昨天序列数字无法居中并且圆圈会被挤压的原因

查看之后发觉是父元素设置了display：flex的缘故

删除之后圆圈就不受挤压了

然后设置圆圈为inline-block 

高度和宽度设置生效

2.使用栅格系统控制样式

3.使用前后伪元素雪碧图添加箭头

4.完善文字在其他页面宽度下的排版

5.添加媒体查询在移动端隐藏箭头

明天计划的事

1.研究一下如何使用CSS画出箭头标志

2.完善箭头标志样式

3.完成优秀学员部分的架构

4.完成任务二的深度思考

遇到的问题

1.在github上使用手机查看时加载很慢 

是不是应该缩小图片的分辨率或者大小

今天的收获

1.理解行高的含义

CSS行高 line-height

一.网页中的文本

文本中的每一个字符都有一个不可见的框，这些框又被放在两条不可见的横线中（垂直居中），两条横线的距离就是行高

二.行高的设置方法

1.直接设置

p{  

    line-height: 100px;

}

2.相对值

有两种相对值：都是相对于font-size而言

百分比

p{

    font-size: 100px;

    line-height: 150%;

}

line-height的值可计算 100px * 150%

倍数

p{

    font-size: 100px;

    line-height: 1.5;

}

line-height的值可计算 100px * 1.5

三.通过设置行高间接设置行间距

通过上面的学习可以知道，上下两行文本之间的间距等于line-height - font-size

通过这个公式，就可以算得行间距。

假如font-size: 20px，现在要设置10px的行间距，则可以得到行高为30px

四.通过设置行高可以使单行文本垂直居中

因为文本默认在行中垂直居中，所以将行高设置成父元素的高度，这样，单行文本就在父元素垂直居中的位置。