CSS 学习之我观

No milestone

No one is assigned

winter 今天发了一篇博文：CSS 布局（一）

个人觉得，让前端工程师从浏览器的技术细节上去了解 CSS 的内部实现，对 CSS 技能的掌握并不会有太多帮助。

CSS 是一门感性的语言，从技术上去深挖 CSS 在浏览器上的实现原理（How），个人觉得还不如从设计上去思考为什么会有这些现象（Why）。

比如 winter 今天文章中提及的几个概念，从设计上来理解的话，是很简单的，同时不需要涉及 XFC 等渲染引擎实现者才需要关心的名词。

最基础的

CSS 的基本功能是排版布局，我们拿出一张报纸，或一本书，会找出一些基本元素：

1. 标题
2. 段落
3. 图片
4. 加粗的文字
5. ……

稍微抽象以下，以上各种元素可分为两类：块元素（标题、段落等）和行内元素（图片、粗体等）。

排版布局，首先要搞定的是多个块元素的排列。段落是个典型的块元素，多个段落之间，一般一段一段往下排就好了。这就是块元素排列的默认规律。（winter 用 BFC 解释了半天-.-）

块元素默认垂直竖排，对应的，行内元素默认水平横排。

基础概念就这么简单。

复杂一点点

在实际需求中，两个块元素有时也需要横向并排。这就引出了浮动（float）概念。通过给块元素设定宽度，并指定浮动方向，就可以实现块元素的横向并排。当然，还有很多其他技巧来实现块元素的横向并排。但只要你从感性上理解了「浮动」和「定位」的画面，其他一些布局技巧，比如负边距等，就都是 hack for fun 了。

HTML 有很好的包容性，比如允许块元素和行内元素混排，这时可以直观的理解成浏览器自动创建了一些匿名块元素来包裹行内元素。这种感性的图像化理解，对设计师非常友好。

overflow 也是解决非常实在的问题：文字溢出时，怎么处理。并不需要扯上什么 BFC 才能理解。

再举一个列子：「外边距合并」。基本规律是，在同一个布局层级里，当两个外边距相遇时，会「大鱼吃小鱼」，合并成一个。与其去研究浏览器是怎么实现的，个人觉得不如从设计层面上想想为什么会有这个需求：

从上图中可以看出，外边距合并，是为了让排版看起来更一致、更舒服。有了这层认识，不合并才奇怪呢。同时也能理解为什么水平方向上，也需要存在外边距合并。一切为了排版更美观。

其他不多说，CSS 的绝大部分概念，都可以从设计的需求上去理解。用设计的眼光去看很多技术细节，对 CSS 来说，更自然、舒服，个人觉得也更容易理解。

最后

重复下我的观点：

CSS 是一门感性的语言，从技术上去深挖 CSS 在浏览器上的实现原理（How），个人觉得还不如从设计上去思考为什么会有这些现象（Why）。

这与是学院派还是实践派没关系。我不是学院派，也不是实践派。作为前端，很喜欢 F2E, The Keystone 中的一张图：

不排斥在上图的技术部分深挖，但个人觉得，对于前端来说，要把技术做好，设计部分也非常非常重要。

最后，致所有希望我和 winter 吵起来的观众，非常遗憾地告诉你们：我很欣赏 winter，就和 winter 也欣赏我一样。我更希望你也加入进来和我们一起把前端做好做精，而不要仅仅是观众。舞台永远不属于观众。

文 / 玉伯

题图：爱因斯坦的一句名言，非常耐人寻味。你可以滚上去再看一下，然后将你的翻译回复给我。

---

欢迎订阅 WTP（Web 技术与产品交流）微信公众帐号。WTP 关注技术、产品、自由梦，在每个工作日（偶尔休息日）会定期推送一篇原创文字。欢迎扫描二维码订阅：