今天完成的事情

• 任务 4 基本完成了。应该符合验收要求。
• 了解了一些垂直居中的方法。父元素的 height = 子元素的 line-height 时能够垂直居中。
• 了解了绝对定位。普通流中其它元素的布局就像绝对定位的元素不存在一样。可以给有绝对定位的元素的父元素加上 position: relative，表示相对于父元素进行定位。

明天计划的事情

• 开始看下任务 5。
• 多了解定位和垂直居中。

遇到的问题

• 不知道什么时候能用下边这种差不多的代码，网上很多人有写。头部的「登录」用这个没有效果，但是两个 img 图标用position: absolute; top: 0; bottom: 0;却可以垂直居中。之后发现好像是要设置 width 和 height 才能达到居中效果。不过最后头部的「登录」我直接用 text-align 和 line-height 来水平垂直居中了。

  position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;

• 输入框垂直居中：下面是模仿网上一些人的写法。

  .account input {  /*input 在父元素里垂直居中*/
    position: absolute;  top: 0rem;  bottom: 0rem;  height: 2rem;  margin-top: auto;  margin-bottom: auto;
  }

  后来发现，我直接搞 margin 和 padding 好像都一个样……知道父元素和子元素的高度来居中……

  .account input {  height: 2rem;  margin: 0.5rem 0 0.5rem 3rem;  padding: 0 0 0 1rem;
  }

• 输入框最开始没能延伸到最右边，又因为它左边设置了 margin 和 padding，所以宽度设置 100% 时会超出包含它的div。最后用 div{overflow: hidden;} 把溢出部分给修剪隐藏了。

收获

• 会使用一些简单的居中方法。
• 会用绝对定位配合其他块的 margin 和 padding 来布局。
• 很多细节还是不太清楚。脑壳疼。