获取元素到页面顶部的距离_Web前端-页面重构之工具篇（Photoshop）

一、说在前面的话

1.1 职责：拒绝"图片仅供参考请以实物为准"

团队的协作流程一般分为以下几个阶段：

• 专业的设计师做设计
• 由前端工程师切图重构还原成浏览器能渲染的页面，再开发功能。

术业有专攻，每一个环节都会有很高的水准，组合成一个各方面都非常专业的网站，为客户的业务提供更好的帮助。

没错，客户需要的站点就是一碗蛋炒饭的话，前端开发人员就有必要让这碗蛋炒饭实物看起来跟食品封面上面的图片一样可口美味！

拒绝图片仅供参考 请以实物为准

UI给你什么样的设计稿你做出来就是他想要的样子！

说远一点是匠人精神近一点 就是对设计成果的尊重

1.2 匠心：为什么要抠那个1px

设计师有这种精益求精的工匠精神，

没理由在前端这里断送呀！！！

所以，前端开发，很有必要精确还原设计稿甚至要精确到像素级别！！！

二、如何做到还原设计稿

还原设计稿是本分，没话说。

但是如果真的细究到0px还原，那还真不是一件小事。

一个网站在设计师手中，都是图片或文字（附加对图片或文字进行相关的处理）的排版

那么对应到前端来说就是一个个块、一个个元素(附加元素自身属性的实现)的排版；

PS:WEB前端一般把一个个组件模块称之为块（Block），组件内部的子节点称之为元素（Element）；即BEM核心思想。

所以要做到还原设计稿，主要是要解决下面这三个问题：

• 块、元素的大小以及他们自身的基本属性（形状、圆角、颜色、背景、阴影等）
• 块与块、元素与元素之间的位置关系与距离
• 块、元素在页面的位置（父子模块、父子元素的相对位置）

下面对上面问题一一详细展开分析。

2.1 块、元素的大小以及他们自身的基本属性

先来说下元素大小的问题，对于图片类的来说我们就要获取图片在PS中的正确大小，这一般来说百分之八十都没什么问题