今日完成：

图片自适应：

img {width:100%;height: auto;}

切图步骤：

传统切图，即是手动切图，用切片工具框选所需要的图标，保存成web格式的图片。但是这种方式的弊端就是切图比较慢，而且如果图标不是矩形，还会导致切出的图片中带有背景，这并不是我们想要的。另外，如果图标比较多，我们还可以利用参考线来使切图更精准，点击基于参考线切图，还能加快切图的速度。不过这也导致切出很多我们并不需要的图标。所以这种方式并不好。

简单切图。Photoshop CC版本比CS6版本多了一些功能，比如选中所需图标的图层后，右键可以直接快速导出png格式。如果想把多个图层导出到一张图片上，可以选中多个图层，右键转换为智能对象，再次右键，编辑内容，即可在新打开的窗口中保存为png格式。CS6版本上没有右键快捷导出功能，但是可以用智能对象导出，也很方便。这种方法的优点是不带背景，简单。

自动切图。选择编辑>首选项>增效工具>启动生成器，然后文件>生成>图像资源。这种方式只需要重命名图层即可生成jpg或png格式的图片，还可以将图片放大。这种切图方式也很方便，切得也很快。

脚本切图。选择文件>导出>将图层导出到文件。接下来就等着PS自动运行完成，图片也就切完了。这种方式虽然完全不需要手动去切，但是也会产生很多你不需要的图片。

复习长度单位：

绝对单位：px

相对：em：父元素

      rem：html

      %：最近父元素

      vh和vw，vmin和vmax：视口

区别em和% ：第一次em的父元素通常是body

区别em和html：em是叠加的，rem不叠加，始终相对html

何时应当使用margin：

需要在border外侧添加空白时。

空白处不需要背景（色）时。

上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：

需要在border内测添加空白时。

空白处需要背景（色）时。

上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

典型的电脑显示器的分辨率是96DPI，也就是1像素为1/96英寸 

css中的px：

在桌面浏览器：1px（下面我们读成‘css像素’）代表1个物理像素，也就是1css像素 = 1物理像素

没有加meta viewport标签时候：移动端viewport宽度为980px或者1024px，这时候1css像素不确定是几个物理像素（根据分辨率来算）

在加了meta viewport标签以后呢？我们引入另外一个单位：密度独立像素dp/dip，所有1px = 1dp/dip

说到移动设备分辨率，这里先提另一个单位dpi(dot per inch)，dpi/ppi是表示一个每inch多少个物理像素dot的单位

在最开始是160dpi/ppi

移动设备分辨率

我们可以理解分辨率就是长宽分别有多少个物理像素dot

但是设备大小就那么大，所以同样大小的设备，分辨率越高，物理像素堆得越多，屏幕越清晰，也就是dpi越高

UI口中的‘像素’

UI图中的像素，也就是psd中我们量出来的像素，比如说任务中psd图的宽度为750px或者640px

UI口中的像素是移动设备分辨率

明日计划：希望可以搞定任务三继续完成任务四

遇到的问题：

对浮动有了新理解，之前一直有误区，以为浮动只是为了覆盖，包括后面模块的元素也一并覆盖，没想到只是覆盖后面的模块，模块中的元素会自动环绕，元素是可以显示出来的，例如水平菜单的例子。浮动也会把后面的元素挤掉的。

整体实现类似于包裹。

浮动的出现就是为了环绕效果

收获：看的太多，写的太少，很多东西没有真正理解，还是要在实践中一点点纠正回来