1.如何利用PS切图以及从UI图中获取所需信息？首先找到切图工具，左侧第5个工具剪切下的子工具（切图工具 和切图选择工具 ），鼠标点击就会出现（我们拿这几个图片作为例子）Ps UI设计如何简单快捷切图

选中后开始切图，找到要切图位子，鼠标点击拖拽。如发现有偏移，可以再到左侧工具栏中选 “切片选择工具”进行调整（图片上可以有很多个切图）

当全部图标10个切完后的样子如图，下面我们按住组合快捷键shift+Ctrl+Alt+S

点选切图 同时按住shift 加选 ，鼠标点击10个切图 ，右上可以修改图片的格式，按存储即可完成切图（保存：选择要存储的位置后下面 的切片类型 选择“选中的切片”）

完成保存后，PS会自动建立一个images 文件夹，里面就是你切图的文件

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

• px：相对长度单位，相对于屏幕的分辨率.

  • - 特点：

    • 优点：稳定 & 精确
    • 缺点：改变浏览器字体大小，布局会被打破

  • - 作用：

    • 给定具体大小，协助em和rem重写具体单位

•  em：相对长度单位，相对于当前元素的文本尺寸,如果当前元素文本尺寸未设置则相对于浏览器默认字体尺寸

  • - 计算公式：targetEM = 1 / parentPX * targetPX;

  • - 特点：

    • 1.em值不固定; 2.会继承父类字体大小
    • 缺点：如果不重新计算已被放大字体的em值的话，各层设置的字体大小复合会导致连锁反应,这个连锁反应是'继承'导致的，想要避免继承的连锁反应可以在目标元素上显式设置px单位的font-size来停止继承.
    • 总结：em对应px的值取决于其使用字体的大小，此字体大小受父类继承过来的大小影响，除非显示重写一个具体单位.

  • - 作用：

    • 允许保持在一个特定的设计元素范围内的可扩展性(应在标识清除的情况下使用em单位)

• rem(root em)：相对长度单位,只相对于HTML根元素

  • - 特点：

    • 优点：只需修改根元素大小就可以成比例地调整所有字体大小,且避免了字体大小逐层复合的连锁反应，且IE8+的浏览器都支持
    • Tip：为应对不支持的浏览器,可以多写一个绝对单位的声明，例如：

    p {font-size:14px; font-size:.875rem;}

    • 总结：rem对应px的值取决于html元素字体大小，此大小会被浏览器中字体大小的设置影响，除非显示重写一个具体单位.

  • - 作用：

    • 保证无论用户如何设置自己的浏览器，布局都能调到合适大小
    • 维护用户拥有自己体验偏好的权利

• %

  • - 特点：

    • 普通元素的百分比定位基于父类.
    • 设置了position: fixed的元素的百分比定位基于浏览器窗体.
    • 设置了position: absolute的元素的百分比定位相对于static定位以外第一个父元素进行定位.

•  vw(viewport width, viewport指的是浏览器内部可视区域大小)

  • - 特点：

    • 计算： 1vw = 1% * width_viewport

• vh(viewport height)

  • - 特点：

    • 计算： 1vh = 1% * height_viewport

•  vm(viewport min)

  • - 特点：

    • 计算： 1vm = 1% * (width<height?width: height

3.如何进行自适应网页设计？

4.css有哪些选择器，优先级如何计算？

基本可以分为通配选择器，标签选择器，类选择器，ID选择器，简单属性选择，具体属性选择，根据部分属性值选择，特定属性选择，从结构上来分还有后代选择器，子元素选择器，相邻兄弟选择器以及伪类。

5.什么时候用margin好，什么时候用padding好？

CSS中margin和padding的区别如下：margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。　　从图示中看得就会比较直观，可以很容易理解了　　　　CSS是层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

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

a.移动设备的默认viewport：
为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的）
b.css中的px、移动设备的分辨率以及UI口中的‘像素’分别怎么理解
css中的px：
在桌面浏览器：1px（下面我们读成‘css像素’）代表1个物理像素，也就是1css像素 = 1物理像素
没有加meta viewport标签时候：移动端viewport宽度为980px或者1024px，这时候1css像素不确定是几个物理像素（根据分辨率来算）
写个20px的文字看看效果（见演示）
在加了meta viewport标签以后呢？我们引入另外一个单位：密度独立像素dp/dip
dp/dip是在不同设备都显示为同一大小的单位（见演示）
简单理解，在使用了<xmp><meta name="viewport" content="width=device-width, initial-scale=1"></xmp>之后，所有1px = 1dp/dip
添加meta标签后20px的文字（见演示）
设备的独立像素都是可以查到的
移动设备的分辨率：
说到移动设备分辨率，这里先提另一个单位dpi(dot per inch)
dpi/ppi是表示一个每inch多少个物理像素dot的单位
在最开始是160dpi/ppi
后来因为技术的提高，为了追求高清屏幕，有了320dpi/ppi以上等等的屏幕
下面继续说移动设备分辨率
我们可以理解分辨率就是长宽分别有多少个物理像素dot
但是设备大小就那么大，所以同样大小的设备，分辨率越高，物理像素堆得越多，屏幕越清晰，也就是dpi越高（见演示）
UI口中的‘像素’
UI图中的像素，也就是psd中我们量出来的像素，比如说任务中psd图的宽度为750px或者640px（见演示）
UI口中的像素是移动设备分辨率