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 也欣赏我一样。我更希望你也参与出去和我们一同把前端做好做精,而不要仅仅是观众。舞台永远不属于观众。

提供最优质的资源集合

立即查看 了解详情