今天完成的事情：

今天仔细修改了任务5里面的样式，然后通过师兄的指导进一步完善，最后提交了任务5。

然后回头再了解了一下块级元素、内联元素、内联块元素。

inline元素：

可以和别的元素同占一行；元素高宽、行高、顶部底部边距无法设置；元素宽度由内容决定；

block元素：

块级元素总是独占一行，元素高宽、边距都可以设置；

inline-block元素：

可以和别的元素同占一行，高宽边距也可以设置；

并且知道了img图片下面出现空白的原因及解决方法：

原因是基线和底线之间会有一段空白区域；

解决的方法：

给图片img标签设置display：block；或者是vertical-align

定义容器字体大小font-size：0；

继续查看了弹性容器的知识，加深理解：

弹性容器包含了一个或者是多个弹性子元素，它并不改变渲染情况，只是定义弹性元素如何布局且默认元素按一行排列。

flex-direction属性：指定了弹性子元素在盒子中是横向还是竖向排列，是从左到右或是从右到左；

justify-content属性：指定了弹性子元素在横向上的对齐方式，有flex-start（从行头紧挨着填充）、flex-end（从行尾紧挨着填充）、center（居中紧挨着填充）、space-between（两边对齐）、space-around（两边对齐，但是两边留有一半的间隔空间）；

align-items属性：设置子元素在竖直方向上的对齐方式，有flex-start（紧挨着上部）、flex-end（紧挨着下部）、baseline（基线对齐）、center（垂直居中）；

flex-wrap属性：指定元素换行方式，有nowrap（单行）、wrap（多行）、wrap-reverse（反转排列）。

继续进一步了解line-height行高

顾名思义行高就是一行文字的高度，具体指两行文字基线之间的距离。

行高具有垂直居中性，能够实现单行、多行或者是图片的垂直居中。

完成了任务6的切图

明天计划的事情：学习雪碧图和其应用，完成任务6中header和footer的布局

今天遇到的问题：暂无