今天完成的事情： 使用ps，安装“一键切图”小工具，了解ps中的图层概念，完成任务三中要求切图的步骤，任务三形成初稿。

明天计划的事情：完成任务三，补习盒子模型概念、单位概念（%、vh、vw、rem等）、自适应概念、定位概念。

遇到的问题：任务三中，div盒子内img的居中方法？文本随浏览器窗口变化时如何保持自动换行？

收获：

1、什么是切图？

切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面，通俗来讲，把一张设计图 利用到切片工具 把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面书写，完成CSS布局。

切图就是将 .psd 设计稿还原成 Web 页面的过程，这个过程包括两部分：

切出素材

编写代码实现

2、为什么要切图？

没有人可以直接把一整张图片引用页面，当作 Web 页面的。切图的主要目的就是给网页提供图片素材 ，可以让你从 html 或者 css 里引入图片。

html: <img src="" alt="">

css:  backgroud-img:url(../images/sprite.png)

3、如何切图？

使用 PS 工具

使用背景图

图片合并方案

浏览器兼容

4、都需要切哪些图？

修饰性，用在 css 里，icon、logo、有特殊效果的按钮和文字

内容性，用在 html 里，Banner、广告图片、文章配图

5、切出来的图片保存为哪种格式？

修饰性的保存为 png24（支持半透明），png8。内容性的保存为 jpg。

6、有哪些可以学习的切图教程

建议可以参考一下慕客网和网易云课堂的前端切图部分。

7、为什么要切图，而不是整张图都放到html去呢?

1，一次性加载一张大图，会比较慢，效果就是进去后看到一张图一点点加载

2，切图后，一些横向和竖向的重复性图案，只需要一个像素宽的源图就行，节省不少资源。如知乎头部和网易云音乐头部导航条，整个背景可以之用一个像素宽的竖条，然后css控制横向铺开就可以了，这里要用一个像素宽的竖条,而非用一个像素点切图是因为，有轻微纵向渐变。

3，对于一些设计稿中的元素，甚至不需要源图，只需要取色, 全部铺开就好了,那就更省了，如网易头部。