这两天状态不太好，大脑袋昏昏的，加上昨晚国足失利，又给自己找到了一个懒惰病再犯的理由，所以决定好好休息一晚，调整一下，今天满血回归，继续再战！！

一、完成的事：

  1、header布局

     利用positon：absolute;使header里的三块文字分别居左，右，居中用center属性，因为要实现自适应，所以值最好用百分比定位。

  2、表单布局、样式

     1)利用margin、padding将两行定位

     2)图片的固定及样式

     3)输入框input固定及样式

  3、button布局、样式

     使用<button>标签，width:100%,利用padding百分比设置定位

     使用letter-spacing属性可以增加字间距

二、遇到的问题

   1.可以设置min-width来解决宽度太小导致页面错位的问题；

   2.顶部左右两边用绝对定位布局，那么中间部分如何居中呢？

      解决：直接设置父级属性,text-align:center

   3.点击输入框会有蓝色的框出现

      用outline：none消掉了input的蓝线

三、明天的计划

   开始任务五的预习（前提：任务四代码和效果无错误的情况下）

四、收获（学到的知识）

  css单位中px和em，rem的区别？

       px像素。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

       em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人设置，则相对于浏览器默认字体尺寸（16px）

       rem是css3新增的一个相对单位。rem为元素设定字体大小时，仍然是相对大小。但相对的知识HTML根元素。

    rem是如何实现自适应布局的？

       rem是根据html的font-size大小来变化，正是基于这个出发，我们可以在每一个设备下根据设备的宽度设置对应的html字号，从而实现了自适应布局。