今天完成的事情：

 今天完成了第四个任务。任务细分：

 一、练习使用了 position:absolute fixed relative几种声明，理解了他们的区别。

• fixed 相对浏览器窗口定位
  
• relative 在正常位置上偏移。但元素依然占据原有的空间
  
• absolute 向祖先元素中找一个 fixed / relative或 absolute定位的元素，相对于这个元素进行定位。
  
• 
  

二、初步学习了input的用法。

• 书写时要记得关闭元素的斜杠
  

• 可以使用伪元素选择器去定义 placeholder 样式input::-webkit-input-placeholder{}
  

• 非常容易遗漏的一点：input 输入框默认存在焦点样式。因为设计图中没有，所以要关闭它。使用伪类选择器input:focus{outline: none;}
  

• 
  

• 三、关于border 和 outline 的区别，border 是元素的外框，平时常用。而 outline 位于边框边缘的外围，可起到突出元素的作用，不会占据空间。
  

• 
  

明天计划的事情：

当然是继续做第五个任务

遇到的问题：

问题一

•  任务4输入界面header中间区域的文字「登陆」需要在position：absolute下居中对齐，但是对齐的结果总有文字长度一半的偏差。如果通过固定像素值去补偿，在视口尺寸变化的情况下依然会出现偏差。经过查资料，我选择使用transform: translate(-50%)来将元素移动元素长度的一半这种方法，保持了恒定居中。但是浏览器兼容似乎不是特别好？
  

• 
  

问题二

•  忘记取消 input 框默认的焦点 outline。
  

问题三

• 元素垂直方向对齐问题。参考了《CSS实现垂直居中的5种方法》一文，解决的详细过程注释在task4.css里。几种方法原理与问题1的情况大同小异，需将要对齐的元素自身高度参与计算得到结果。假如该元素高度可变，就会很不方便，我猜想配合Javascript公式计算才可以完美解决？

• 
  
• 收获：

• 了解了定位
  

• 了解了伪类与伪元素
  

• 初步练习了input
  

• 进一步熟练 css 选择器和 html 元素结构关系
  

• 学习了outline

• 深入思考了垂直对齐问题