今天完成的事情：

1.学习relative, absolute, fixed 的区别

2.了解input标签

3.完成css任务5中头部部分

   效果如图，

明天计划的事情：

1.继续css任务5

2.学习《CSS代码规范》

遇到的问题：

1.使用chrome浏览器调试时，css注释部分中文乱码

   如图， 

    解决方法，在css开头添加@charset"utf-8"，如图，

2.图片img与父元素div之间存在间隙

img{vertical-align:bottom;//middle和top也都可以}

img{display:block
}

.content{ float:left; margin:100px auto;background:pink;font-size:0px;
}

收获：

1加深对position的理解。

  position分为static、relative、absolute、flex。

  static为默认方式，无特殊，遵循标准文档流。

  relative为相对定位，遵循标准文档流。如果给relative加上top、left。则会相对于原来的位置进行偏移，但占据的空间仍然是原位置的空间。再加上margin后，占据的空间相当于原来位置加margin的大小。

  absolute为绝对定位。脱离标准文档流。根据以postion非static方式定位的祖先类元素进行定位。

直接使用top、left相对于祖先类元素的位置进行定位。相当于直接找坐标贴标签。

  fixed称为固定定位。也脱离文档流。但是是根据窗口的原点进行定位的。也就是说他不随着滚动条的变化而变化。一般网页的小广告应该就是用fixed定位的。

  z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。相当于添加了对线的z坐标。整数值相当于权重。越大越放到上层。但是这个属性只能给position非static的元素使用。