任务七

今天完成的事情

1. ‍‍1. 完成任务七样式的编写。
2. 2. 利用padding-top和after伪元素来实现高度自适应宽度。
3. 3.利用flex的justify-content可以很方便的实现两边靠边，中间间隔相等的布局，要结合子元素的flex属性一起使用
4. 4. 使用vertical-align-middle 和伪元素来实现垂直居中，下面是css代码： 

5. .pic_box{width:300px; height:300px; background-color:#beceeb; font-size:0; *font-size:200px; text-align:center;}.
                                                                                                                        pic_box img{vertical-align:middle;}.
                                                                                                                                                           pic_box:after{display:inline-block; width:0; height:100%; content:"center"; vertical-align:middle; overflow:hidden;}

6. ‍‍html代码
7. <div class="pic_box">    <img data-src="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg" /> </div>

明天计划的事情

1. 1.完成任务八的切图
   
2. 2.完成任务八的结构编写

遇到的问题

1. 1. 高度如何自适应？可以根据padding属性的百分比是根据宽度计算的这一特性并结合伪元素来实现。但是其缺点是内部的内容需要用绝对定位来布局。
2. 2.底部固定的footer怎么居中？因为对绝对定位不熟悉，询问师兄后发现可以直接margin：0 auto就可以了，看来有的时候还是想复杂了。

收获

1. 1.小课堂上师姐讲解了垂直居中的几种方法，和我昨天总结的差不多，让我对垂直居中更加熟悉了。
2. 2.学会了flex两端对齐的布局方法，代码简单且能自适应。
3.