完成了什么：

完成任务四部分。

遇到的问题：

图片和输入框不能再同一水平线问题：尝试使用了几种input中加入图片的做法，

第一个添加背景图片。background-image: url(../css/pblogin/zhanghao.png); /*引入图片图片*/

一个是在input标签前使用 i 标签插入  <i

后来发现不对，弄不好，于是检查了下布局结构把<div><img src=></div>的div給刪除了，最后是<img><input>这样才使图标和输入框在一个盒子上。

密碼框和手機號框順序錯了:一开始检查并没有发现那里出问题了，后来排查出是样式.user{height:0.5rem;}样式的问题，就把这个给删了。

想給img图标设置padding四周的值同时想让他图标跟输入框背景颜色一致让他居中然后脱离输入框了，飘到上面去了。颜色又变成了一大坨白框。排除注释各个代码之后发现是html{font-size:625%}的问题，所以就把装图标和手机号框的盒子给予size值。username{font-size：0.2rem}

然后发现顶部与输入框白色部分没间隙，发现用的是padding，所以改为margin-top有了间隙。

图标跟手机输入框不对称没居中，无法把白色背景跟输入栏和图标都在一个框内，输入框太小。给盒子添加flex和垂直水平居中之后和整理图标的间距问题。

另外输入框没跟白色背景一致大小，所以把父元素设置了一定高度，input标签也跟着100%。解决输入框大小问题用了”calc“，把input插入width：calc（100%-倆个图标的间距rem）即可拉伸铺满输入框，另外使用outline：none去除input边框。

明天计划：

完成任务四；

今天收获了什么：

收获了calc，calc() 函数用于动态计算长度值运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；任何长度值都可以使用calc()函数进行计算；不过还不熟，明天再看看相关。