‍‍【今天完成的事情】

‍‍1‍‍.修改并完善了任务1~5‍‍

2.没了

‍‍【收获】‍‍

‍‍1.三种垂直居中方法‍‍

‍‍ 1）‍‍用padding、margin撑‍‍‍‍

 2）‍‍line-height‍‍

 3）‍‍display:flex;

  ‍‍align-items:center;‍‍

2.

‍‍

‍‍最下面的横线直接用 border-bottom：1px soild;（不用切图，盒子最下边缘）

‍‍同理标题右边的竖杠也可以直接用border-right来设置（盒子最右边缘）‍‍‍‍

（以前一直把线切图切出来。。也是傻得可以。。）

3.解决了左边标题始终垂直居中的问题

第一种方法：

对父元素设置

display: flex;

align-items: center;

对右边设置flex:1;（ ‍‍让所有灵活的项目都带有相同的长度,忽略它们的内容‍‍）

第二种方法：

‍‍display:table-cell和vertical-align:middle一起使用，来实现元素的垂直居中效果。‍‍

4.学习了几个常用Flex布局的属性

.‍‍box {‍‍

 ‍‍ justify-content: flex-start | flex-end | center | space-between | space-around;}‍‍‍‍

‍‍flex-start（默认值）：左对齐

‍‍flex-end：右对齐

‍‍center： 居中

‍‍space-between：两端对齐，项目之间的间隔都相等。

‍‍space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

‍‍align-items属性定义项目在交叉轴上如何对齐。

‍‍.box {‍‍

‍‍  align-content: flex-start | flex-end | center | space-between | space-around | stretch;}‍‍

‍‍flex-start：与交叉轴的起点对齐。‍‍

‍‍flex-end：与交叉轴的终点对齐。‍‍

‍‍center：与交叉轴的中点对齐。‍‍

‍‍space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。‍‍

‍‍space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。‍‍

‍‍stretch（默认值）：轴线占满整个交叉轴。‍‍

‍‍‍‍【遇到的问题】‍‍‍‍

1.还是因为不太熟练和概念混淆造成的布局问题等等，回头看其实也不难，但是写的时候却很难下手，还是需要多加练习。

【明天计划的事情】

‍‍1.了解一下CSS3的Flexbox（弹性盒布局模型）以及适用场景2.学习如何使用IconFont3.深入理解理解vertical-align与line-height‍‍