今天完成的内容:

1.任务4个全部完成

a.自适应：页面宽度始终占满屏幕（完成）

b.移动端：header始终固定顶部（完成）

c.还原设计图：输入帐号小图标与输入框要水平对齐（完成）

d.扩展性：去掉header的三块文字的任意一两个，剩下的一两个都还在原位置上不会受到影响。（完成)

e.编码规范：参照任务3(完成）

2.background属性的深入理解

3.background的语法循序，注意事列

4.渐变图像的简单学习

明天的计划：

1.任务4的深度思考

2.任务3的温习和修正

遇到的问题：

1.实践关于几个不同的垂直居中还是有点难运用，再多次反复修改纠正中慢慢还是开始熟练其用法，但是过于青涩，几种办法不明白在什么情况下更适合用哪个，不过师兄告诉我absolute少用，所以决定以后养成能不用就不能absolute的习惯；

2.途中一些代码失效和显示出来，后来发现还是老生长谈的一个问题：“粗心导致的代码错误和语法标点使用不规范”谨记。

3.关于数值百分比的使用和不使用的模糊概念，后来发现一个重大问题，自适应页面时如果不设置好数值的百分比的话就会出错，因为不设置就是默认继承父元素值或auto在页面缩小的时候就会造成空间（宽度）不够被挤到下一行。

收获：

1.background的各个基本属性

2.background语法：

bg-color || bg-image || bg-position [ / bg-size]? || bg-repeat || bg-attachment || bg-origin || bg-clip （顺序并非固定, 但是要注意: 1、background-position 和 background-size 属性, 之间需使用/分隔, 且position值在前, size值在后。 

如果同时使用 background-origin 和 background-clip 属性, origin属性值需在clip属性值之前, 如果origin与clip属性值相同, 则可只设置一个值。）

background是一个复合属性, 可设置多组属性, 每组属性间使用逗号分隔, 其中背景颜色不能设置多个且只能放在最后一组。

如设置的多组属性背景图像之间存在重叠, 则前面的背景图像会覆盖在后面的背景图像上。

3.background-position的超级用法

也可以使用 background-position-x 或 background-position-y 来分别设置横坐标或纵坐标的偏移量。

注意: 当使用 background-position-x 以及 background-position-y 时, 需考虑Firefox兼容性的问题。

4.background-size的取值：

1、 可使用长度值或百分比指定背景图像的大小, 值不能为负值。如果设置一个值, 则该值用于定义图像的宽度, 图像的高度为默认值 auto, 根据宽度进行等比例缩放; 如果设置两个值, 则分别作用于图像的宽和高。

2、 auto 默认值, 即图像真实大小

3、 cover 将背景图像等比缩放到完全覆盖容器, 背景图像有可能超出容器。(即当较短的边等于容器的边时, 停止缩放)

4、 contain 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等, 背景图像始终被包含在容器内。(即当较长的边等于容器的边时, 停止缩放)

5.background-repeat的取值

1、repeat-x 表示横向上平铺, 相当于设置两个值 repeat no-reapeat;

2、repeat-y 表示纵向上平铺, 相当于设置两个值 no-repeat repeat;

、repeat 表示横向纵向上均平铺;

4、no-repeat 表示不平铺;

5、round 表示背景图像自动缩放直到适应且填充满整个容器。 注意: 当设置为 round 时, background-size 的 cover 和 contain 属性失效。

6、space 表示背景图像以相同的间距平铺且填充满整个容器或某个方向. 注意: 当 background-size 设置为 cover 和 contain 时, background-rapeat 的 space 属性失效。

注意, background-repeat 的 round/space 属性, 部分Firefox版本不支持。

6。background-origin用于设置 background-position 定位时参考的原点, 默认值 padding-box , 另外还有两个值: border-box 和 content-box。

7.background-clip

用于指定背景图像向外裁剪的区域, 默认值 border-box , 另外还有两个值: padding-box 和 content-box。

注意: 由于 background-origin 的默认值为 padding-box, 即背景图像 background-image 的默认定位 background-position 参考的原点为 padding区域是[包含padding], 所以为了更好的了解 background-clip 几个属性值的特性, 可将 background-origin 设置为 border-box 。

8.线性渐变 linear-gradient()

第一个参数: 可不写, 默认值为 to bottom (即180%), 用来指定渐变的方向, 可是是具体的角度值, 也可以直接指定方位 to left/ to right/ to top/ to bottom。

总结：任务4基本今天已经玩成，并达到自己满意的程度。接下来就是任务3，2，1的改善和温习，然后总结这半个月来自己学到的东西，等把自己学到的东西掌握得差不多的时候在向任务5进化（前面做任务3，4的时候其他学到一些东西还是使用的很勉强，很多效果都要实验和百度，我认为这样不是一个好显示，容易遗忘，所以想放慢速度，学的扎实一点）

顺便贴一下我的代码，有什么不足的先感谢师兄的指出了