编者按： 设计师 应该学习哪些前端基础知识，才能和工程师顺畅沟通？本文用深入浅出的案例，帮你快速掌握基础的 前端开发 术语。
在实际项目中，直至开发扣完最后一行代码之前，UI 所输出的视觉稿其实并不算是产品的最终形态。因此，设计-开发这一上下游的协作对你的视觉落地起着决定性的重要影响。
但是！由于工种本身的性质，我们和开发之间的沟通是个棘手又麻烦的历史遗留难题。
我们一方面厌恶那些“div”“margin”类的开发术语，另一方面又渴望开发能够意会我们的稿子，像复刻机一样完美得把它实现出来，但排除那些极少数本身有很好审美的开发外，这件事本身就是个可遇不可求的幻想。因此，理解一些开发术语和开发的工作流，对于设计-开发的协作效率的提升无疑是极为有效的。
想一想，从“这个和那个能不能分开一点“这种开发眼里极富乡土气息的白话到“两个字段的 margin 增加到 20”这种专业的逻辑语言，中间可以省下多少宝贵的时间啊让我们去充（xiao）电（sa）啊。
我知道你们不想去 W3school 吭哧吭哧学代码，所以我花了大量时间研究了它们，并主动请教了几位开发，再用极具想象力的方法带各位熟悉代码的世界、以及开发小哥的日常~各位读完之后，基本有能力解决 90%因为沟通产生的难题！
欧克，废话不多说，雷斯够！
更多基础教程：
写给设计师的前端指南：一小时搞懂 CSS 属性应用 这个系列会用所有人能看懂的讲解方式，帮助大家掌握 HTML 和 CSS 的基础。
阅读文章 >
一、Html、Css 和 JavaScript Html 是最基本的“骨架”代码，术语叫超文本标记语言。形象点儿说，这玩意儿主要是用来贴名牌的。我们的浏览器其实是个眼神和脾气都不太好的门卫大爷（原谅这个蹩脚的比喻），元素们只有添上他们独有的名牌，才能被它认出来并允许进入，大部分还得正反都贴。
比如，a、p和 img 就分别代表了链接、段落和图片的名牌。一旦有个家伙没贴，就立刻 OUT 出局。但是，他们懒啊，自己不想动，这时就轮到我们的正义使者——开发小哥闪亮登场了！
辛勤的开发小哥用神奇的 Html 语言，为每个懒货贴上属于他们自己的名牌，进入浏览器大闸的行为也就变得名正言顺。
左下图就是用 Html 贴上名牌（标签）的链接、段落和图片，右下图就是他们在浏览器中的反映。
但是，问题来了——
这些倒霉孩子实在是太杂太多了，成天四处乱跑杂乱无章，为了将他们进行管理和约束，开发小哥们就用 div 这类标签建立了一个个班级，按照设计师给出的视觉稿，把关系更相近、密切的元素们划分到一个班级去，从而实现对元素们的高效管理、收纳。
然后，开发小哥再根据视觉稿中的具体样式，用css（层叠样式表）来装扮这些元素。
首先在代码中加入