今天完成的事情：今天领取了任务三，1.根据任务三要求学习了ps的切图，看了学习资料，有四种切图方法：传统切图，参考线切图，精准切图和自动切图 

我用的是ps的插件cutman,是一款智能自动切图插件，我觉得还是非常好用的，可以输出固定尺寸的图片，支持jpg,png,gif

2.学习了px em rem的区别 ：

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

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，并且em的值并不是固定的， em会继承父级元素的字体大小

 rem是CSS3新增的一个相对单位（root em，根em），相对的只是HTML根元素。通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

明天计划的事情：明天继续做页面

遇到的问题：今天没做多少，只是还原了设计图，所以还未遇到问题

收获：页面中盒子的高度不能设固定高度。开始学DIV+CSS布局的时候我给每个盒子都设置了固定的宽和高，这样页面做起来非常快，只需要先把页面整体的布局结构搞定，再往里面丢内容就行了，但是后来发现这样的结构是错误的，调整浏览器的宽度里面的内容可能会冲破盒子。正确的思路是高度由内容去撑起来，不管你如何去缩小，内容都不会跑出盒子。

百度了自适应布局的方法：

方法一：页面中的宽度都用百分比来做。1.百分比是按照父元素的宽度来计算的，包括margin 和padding的值，也是除以父元素的宽度，水平方向的单位都需要设置成百分比。2.然后字体的大小最好使用rem单位来设置，需要给根元素设置一个字体大小，比如html.body{font-size:10px}，则1rem的大小为10px，方便在不同的屏幕尺寸来调整页面整体文本的大小。3.使用媒体查询来根据不同的屏幕尺寸来应用不同的样式 4.图片的宽度要设置成百分比，高度不需要设置，这样缩小屏幕时，图片自动的等比例缩小和放大

方法二：页面所有的尺寸用rem单位来设置

1.根元素设置字体大小为20px。html,body{font-size:20px},后面页面中所有的尺寸按照PSD上面量出来后除以40转换成rem单位的数值，注意是任何尺寸都要需要去除以40，这比第一种设置百分比按照父元素的宽度去计算方便很多。

2.图片需要设置宽和高，PSD量出来后除以40，少一个都不行，只设置一个图片会被拉变形。

3.做手机端页面时，清除margin和padding 用*可能清除不掉，需要加上标签名字去清除。