写了好久不小心按了刷新，然后全没了，重新写一遍23333

一、今天完成的事情

1、footer部分排版

footer部分使用的position定位方式是fixed；使之左右下的位置分别为0，靠近底端；

中间2个元素使用flex布局。（默认flex布局的元素是没有间距的是吗？？）

分别设置padding和margin数值来达到图示效果：

2、背景图片设置

分为2个大块，左边img,右边是文字和图标；

头像用的是absolute定位；右侧大的div设置好间距，与头像并列；

其中右侧小图标也是使用的absolute；

3、文字部分设置

第一行使用的是大div套小div来画竖线；设置好间距；

第二行要注意的是图片和文字并列，如何垂直居中：

搜到来一个解决方法：

.contain2 img

{

vertical-align: middle;

}

在图片下面设置可以实现；这里不换行，使用的排列方式是图标+span+图标+span;

4、下面3行都是一样的布局：

使用来大div套2个小div来实现，都用float：left;但是发现设置后大div宽度变为0；

搜到的解决方法：

.contain3:after

{

content:"";clear:both;display:block;

}

对大div进行设置，可以解决不适应的问题。

5、最后一行布局

要解决2个问题：

左侧宽度固定，随高度自适应垂直居中；

右侧自适应右侧，切不能掉到左侧下面。

使用flex布局。左侧设置flex-shrink:0;保证宽度不变；

居中方式：align-items：center；可垂直居中；

最后解决行高问题，用line-height来设置。

二、遇到的问题

1、没有滚动条

发现内容超出页面时没有滚动条，设置：

main

{

overflow: auto;

}

但是滚动条范围只有页面1半。设置body高度和main高度后发现好了一点。

2、图片和文字垂直居中

.contain2 img

{

vertical-align: middle;

}

3、并列div使用float时不适应

.contain3:after

{

content:"";clear:both;display:block;

}

三、明日计划

1、查看学习资料——《CSS Sprite雪碧图》

2、通过搜索引擎查看如何用css模拟下拉框

3、预习任务6

四、收获

1、熟悉了如何使用flex布局实现各种效果：
    包括并列宽度设置；对齐设置；伸缩设置等；
2、对盒子模型进一步的熟悉，尤其是padding、margin的使用，border设置；
3、熟悉如何根据需要选择position定位，如relative,absolute,fixed；
4、图片如何与文字垂直居中；
5、并列div如何使用float；
6、行间距的设置。