简单切图，Photoshop CC版本比CS6版本多了一些功能，比如选中所需图标的图层后，右键可以直接快速导出png格式。如果

想把多个图层导出到一张图片上，可以选中多个图层，右键转换为智能对象，再次右键，编辑内容，即可在新打开的窗口中保存为png格式。CS6版本上没有

右键快捷导出功能，但是可以用智能对象导出，也很方便。这种方法的优点是不带背景，简单。

                  自动切图，选择编辑>首选项>增效工具>启动生成器，然后文件>生成>图像资源，具体可以看我的视频演示。这种方式只需要

重命名图层即可生成jpg或png格式的图片，还可以将图片放大。这种切图方式也很方便，切得也很快。

                  脚本切图，选择文件>导出>将图层导出到文件。接下来就等着PS自动运行完成，图片也就切完了。这种方式虽然完全不需要

手动去切，但是也会产生很多你不需要的图片。  <来源>https://www.jianshu.com/p/79c58c5f61ee

   (2)px、em、rem、%、vw、wh、vm等单位有什么区别？

     px:px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

     em:参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

     rem:css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。

      %：一般宽泛的讲是相对于父元素，但是并不是十分准确。对于普通定位元素就是我们理解的父元素；对于position: absolute的元素是相对于已定位的父元素；对于position: fixed;的元素是相对于ViewPort（可视窗口）

     vw：css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

     vh：css3新单位，viewpoint height的缩写，视窗高度，1vh等于视窗高度的1%。举个例子：浏览器高度900px, 1 vh = 900px/100 = 9 px。

     ‍‍vm：css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm；举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vm = 900px/100 = 9 px，vm的兼容性较差。

   （‍‍3）如何进行自适应网页设计？‍‍‍‍

      <1>在网页代码的头部，加入一行viewport元素，<meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度，上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为

1.0，即网页初始大小占屏幕面积的100%;

      <2>不使用绝对宽度;

      <3>字体大小，字体大小是页面默认大小的100%，即16像素字体不要使用绝对大小"PX"，要使用相对大小“REM”；

      <4>流动布局："流动布局"的含义是，各个区块的位置都是浮动的，不是固定不变的，其好处是，如果宽度太小，放不下两个元素，后面的元素会

自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。

      <5>选择加载CSS："自适应网页设计"的核心，就是CSS3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件。

   （4）CSS有哪些选择器，优先级如何计算？

      参考：https://www.jianshu.com/p/b69de6742357

   （5）什么时候用margin好，什么时候用padding好？

      Margin的几个特性：:围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”；margin始终是透明的；margin是用来隔开元素与元素的间距；margin用于布局分开元素使元素与元素互不相干；

      Padding的几个特性:元素的内边距(填充)，在边框和内容区之间。控制该区域最简单的属性是 padding 属性.padding是用来隔开元素与内容的间隔。padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

    （6）手机中的分辨率和网页中的px是一回事吗？

      分辨率（Resolution)：是一个表示平面图像精细程度的概念，它通常是以横向和纵向点的数量来衡量的，
表示为水平点数垂直点数的形式，例如1366px768px。

       像素（px）：是一个相对单位，而且在特定设备上总是一个近似值（原则是尽量接近参考像素）。

明天计划的事情：

     开启任务四

遇到的问题：

   1.页面布局写好以后，会随着是窗口大小变化上下跑

     在师兄的点拨下，去掉了纵向拉伸，设置;  magin:0 auto,满足页面需求，还有就是要用相对单位px。

   2.div中内容居中的问题

                       行高（line-height）法：如果要垂直居中的只有一行或几个文字，只要让文字的行高和容器的高度相同，如：p { height:30px; line-height:30px; width:100px; overflow:hidden; }

         内边距（padding）法：另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，p { padding:30px; }

         直接在盒子中设置：text-align：center也可以达到效果，还有两种方法看的不是很懂，没列举出来。不过这几种方法都是准垂直居中方法；

收获：综上所述。