想让设计落地效果更好？5分钟帮你掌握前端基础知识！ 收藏

编者按： 设计师 应该学习哪些前端基础知识，才能和工程师顺畅沟通？本文用深入浅出的案例，帮你快速掌握基础的 前端开发 术语。

在实际项目中，直至开发扣完最后一行代码之前，UI 所输出的视觉稿其实并不算是产品的最终形态。因此，设计-开发这一上下游的协作对你的视觉落地起着决定性的重要影响。

但是！由于工种本身的性质，我们和开发之间的沟通是个棘手又麻烦的历史遗留难题。

我们一方面厌恶那些“div”“margin”类的开发术语，另一方面又渴望开发能够意会我们的稿子，像复刻机一样完美得把它实现出来，但排除那些极少数本身有很好审美的开发外，这件事本身就是个可遇不可求的幻想。因此，理解一些开发术语和开发的工作流，对于设计-开发的协作效率的提升无疑是极为有效的。

想一想，从“这个和那个能不能分开一点“这种开发眼里极富乡土气息的白话到“两个字段的 margin 增加到 20”这种专业的逻辑语言，中间可以省下多少宝贵的时间啊让我们去充（xiao）电（sa）啊。

我知道你们不想去 W3school 吭哧吭哧学代码，所以我花了大量时间研究了它们，并主动请教了几位开发，再用极具想象力的方法带各位熟悉代码的世界、以及开发小哥的日常~各位读完之后，基本有能力解决 90%因为沟通产生的难题！

欧克，废话不多说，雷斯够！

更多基础教程：

写给设计师的前端指南：一小时搞懂 CSS 属性应用 这个系列会用所有人能看懂的讲解方式，帮助大家掌握 HTML 和 CSS 的基础。

阅读文章 >

一、Html、Css 和 JavaScript Html 是最基本的“骨架”代码，术语叫超文本标记语言。形象点儿说，这玩意儿主要是用来贴名牌的。我们的浏览器其实是个眼神和脾气都不太好的门卫大爷（原谅这个蹩脚的比喻），元素们只有添上他们独有的名牌，才能被它认出来并允许进入，大部分还得正反都贴。

比如，a、p和 img 就分别代表了链接、段落和图片的名牌。一旦有个家伙没贴，就立刻 OUT 出局。但是，他们懒啊，自己不想动，这时就轮到我们的正义使者——开发小哥闪亮登场了！

辛勤的开发小哥用神奇的 Html 语言，为每个懒货贴上属于他们自己的名牌，进入浏览器大闸的行为也就变得名正言顺。

左下图就是用 Html 贴上名牌（标签）的链接、段落和图片，右下图就是他们在浏览器中的反映。

但是，问题来了——

这些倒霉孩子实在是太杂太多了，成天四处乱跑杂乱无章，为了将他们进行管理和约束，开发小哥们就用 div 这类标签建立了一个个班级，按照设计师给出的视觉稿，把关系更相近、密切的元素们划分到一个班级去，从而实现对元素们的高效管理、收纳。

然后，开发小哥再根据视觉稿中的具体样式，用css（层叠样式表）来装扮这些元素。

首先在代码中加入