今天完成的事情：

计算图标尺寸比例完成为div添加样式和文本内容，使页面布局和设计图基本一致，其中学习了图片的自适应及如何缩放，任务三每一个块元素设置%边距，水平对齐块元素，内边距与外边距的概念加深理解

明天计划的事情：

将任务三，配置nginx的http服务，使本地可以通过配置的域名访问，检查任务三是否能在不同设备上显示，不行的话继续调试，上传任务，开始任务四学习，包括学习relative, absolute, fixed 的区别、input、切图

遇到的问题： 

任务三因为几个图标根据切图未改动大小直接放置在元素中，导致屏幕分辨率缩小时最后个图标浮动到下一行，而且边距根据原图计算出的%过大，占有空间更大，最终呈现的效果不能根据分辨率大小正常变化，根据师兄讲解，将边距改小，同时将图片比例缩小，完成可以在最小分辨率下正常显示

收获：

1、图片自适应方法：img {max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：img {width: 100%;}
windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令img { -ms-interpolation-mode: bicubic;}

2、CSS实现图片放大缩小的几种方法

常用使用img标签，制定width或者height的任意一个，图片会自动等比例缩小；

使用CSS3新属性，transform的scale 
例：img {width: 100px;//重置大小，最终图片大小确定}

大于1: 放大、小于1: 缩小

img{ transform:scale(2);}//设置缩放比例

3、对齐块元素使用 margin 属性来水平对齐

通过将左和右外边距设置为 "auto"，来对齐块元素。

注释：除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。

把左和右外边距设置为 auto，规定的是均等地分配可用的外边距。结果就是居中的元素，如

如果宽度是 100%，则对齐没有效果。

4、字间隔与字母间隔的使用

字间隔word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。

word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值，那么字之间的间隔就会增加。为 word-spacing 设置一个负值，会把它拉近。

字母间隔letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。

与 word-spacing 属性一样，letter-spacing 属性的可取值包括所有长度。默认关键字是 normal（这与 letter-spacing:0 相同）。输入的长度值会使字母之间的间隔增加或减少指定的量。

5、Margin和Padding值设置成百分数的布局时参照的宽度

margin设置成百分数的时候，其top right bottom left的值是参照父元素盒子的宽度进行计算，在w3c的规范中也是这样描述的： margin的百分比值参照其包含块的宽度进行计算，同样的padding如果设置成百分数的话，其盒子模型和margin是一样的。

为什么要选择宽度做参照而不是高度呢？

这要从CSS设计意图上去想，因为CSS的基础需求是排版，而通常我们所见的横排文字，其水平宽度一定（仔细回想一下，如果没有显式的定义宽度 或者强制一行显示，都会遇到边界换行，而不是水平延展），垂直方向可以无限延展。但当书写模式为纵向时，其参照就变成了高度而不再是宽度了。

6、深入了解padding和margin的相关内容，因为在任务三中设置边距时，发现既可以设置外padding也可以设置成margin，那他们有什么不同呢，在设置背景颜色时发现，边框内的如果有背景颜色都会跟随设置为该颜色，也就是padding区域也会有颜色，而外边距则时空白的区域，padding在边框里填充，margin在边框外。