今天完成的事情
 完成任务4
初步使用弹性盒子，input如何修改样式，对盒子模型margin padding border等认知更深刻，学会了如何在input里面插入图片。

明天计划的事情
 尽量完成任务5

遇到的困难

今天开始做任务4，师兄师姐提到了弹性盒子的概念，说比浮动布局功能性更强，于是通过百度学习，通过使用弹性盒子布局完成了任务4的header布局。
然后是main部分，button以及footer部分没有遇到太大的困难，能通过百度找到自己所需要的知识。
涉及到input部分，我对psd任务资源的布局理解错了，所以一开始是理解成图片拼上输入栏来实现任务要求的布局，虽然看起来一样，但是对于css来修改input样式的知识没有深入。
<----------错误思路如下...---------->
html:

css:

这是通过float，然后设置width来实现img跟input的无缝衔接，最骚的是任务资源上的输入栏边框的样式不是通过css修改原有样式来的，而是直接切图切下来然后拼到input。。。。。


<------------------正确的思路------------------------>
后来师姐纠错说边框的样式要通过css修改来实现，我又百度了如何在input里面插入小图标，对照百度的步骤学习了很多布局的知识点，比如插入的图片是要设置绝对定位，那么就要给上级元素设置成相对的参数。然后插入小图标是通过background-img来实现的，要设置好其他的参数，显示方式是catain还是over，这个跟需要图片显示的尺寸有很大的关系。最后给main整体实现垂直居中的时候使用了弹性盒子布局（弹性盒子更简单，用浮动实在是不知道怎么搞了）。
html代码：

css代码：

收获
用与一开始完全不同的思路完成了任务4！用到的新知识都是收获！