CSS部分比较容易掌握的，但是深入到CSS，并不会太容易。CSS的知识比较零碎，所用到的技巧也相对比较多。一句话“入门容易就，提升难”，今天教授带你走一趟，一起对CSS的一此冷门知识做个梳理.

关注“教授学苑”，期待带给你快乐的开发知识！

历史课

貌似教授最爱讲的就是历史。why? 学习一个新的知识，要想全面理解和掌握，一定要弄清楚它的历史，本质和局限。这条规则是通解哦，大家可以看我的其它文章。比如讲Node.js的。

混沌未分天地乱，CSS的诞生就是为了终结当时由推动Web世界繁荣的首功之臣HTML引发的混乱局面。在1990~1993年Web世界还处于一片荒芜的时候，HTML这个勤劳而艰难生存的族群带着描述段落、标题、超链接等结构性内容（后来这些成员荣升HTML国的贵族，经过几次战乱并一直生活到现在）的技能给Web世界带来了生机。而后 Mosaic（早期的一款浏览器）的出现让文字和图片可以一起显示出来，也一夜之间让Web威名远扬，这里充满魔力与神奇。无数的站点冒了出来，无数的站点吸引无数的人，无数的人带来无数的新功能，我要字体能变色，我要字体能加粗，各种样式要求不断增加。HTML为了满足人们不断膨胀的欲望和要求努力扩充技能树，最后弄得自己苦不堪言，一大堆描述样式的标签（现在还有的<i><em>等）搞得开发乱七八糟。结构化标记语言就这样变成了一坨坨的字符串！:-) .

刚成立的Web世界联合国W3C并没有坐视不管，而是在积极的寻找与焦急的等待。终于他们找到了CSS。CSS在现在Web开发中可谓平淡无奇，写CSS是很自然的事情因为它就属于开发的一部分，但在当时却是绝无仅有的。它最初由Wium Lie于1994.10.10提出来，这帅哥是Lee（万维网的发明者）的同事。之后又由Bert Bos建议经过W3C的公开和内部讨论最终在1996年底推出CSS1，并使之成为标准被推荐，很快浏览器厂商也争相在自家产品中实现以占领市场。这中间也并非一帆风顺，比如网景公司就提交了一种新语言JSSS来实现样式，但最终并没有被接受。

1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。工作组始讨论第一版中没有涉及到的问题。最后在1998年5月推出了CSS2的版本，之后又进行了细微的修正定版CSS2.1。接下来就是CSS3，这一步就是10年啊....直到2011年6月7日，CSS 3 Color Module终于发布为W3C Recommendation。当然CSS3也并没有停也发展的脚步，2017年1月31还发布了一个snapshot.

CSS原理

教授不会去讲定义。谈定义没有意思！知道了定义又如何？不理解就是白说.教授在面试时常问的过程：“介绍一下CSS？”，“CSS就是层叠样式表”,然后就没有然后了。是不是这个理？那怎么来理解层叠，给你一张图来悟一下

这是CSS中最最最重要的一个知识点盒子（Box），理解CSS工作原理的关键在于能够设想每一个HTML元素的周围都有一个看不见的盒子。

“设想HTML元素周围有一个盒子”

CSS允许你创建规则，来控制每一个盒子以及盒子中的内容的呈现方式。

说到这，要理解CSS如何工作，还要扯一点浏览器的工作原理！

当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：

浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。

浏览器显示 DOM 的内容。

关于 DOM

DOM是一种树形结构. 标记语言中的每个元素,属性,文本片段都变为一个 DOM 节点。这些节点由它们与其它 DOM 节点的关系来定义。有的元素是某些子节点的父节点，且这些子节点有兄弟（节点）。

由于 DOM 是 CSS 与文档内容的相遇之处，理解 DOM 有助于设计，调试和维护你的 CSS 文件。

表示 DOM

相对于漫长而无聊的解释，让我们通过一个例子来看一下 DOM 和 CSS 如何一同工作。

让我们假定下面这段HTML代码：

可解析成如下的 DOM 树：

CSS 解析

和 HTML 不同，CSS 是上下文无关的语法。CSS语法采用 BNF 格式描述如下：

别蒙....CSS本身就是程序...WebKit 使用 Flex 和 Bison 解析器生成器，通过 CSS 语法文件自动创建解析器。正如我们之前在解析器简介中所说，Bison 会创建自下而上的移位归约解析器。Firefox 使用的是人工编写的自上而下的解析器。这两种解析器都会将 CSS 文件解析成 StyleSheet 对象，且每个对象都包含 CSS 规则。CSS 规则对象则包含选择器和声明对象，以及其他与 CSS 语法对应的对象。

至此两个树相互关联，渲染引擎就可以渲染了。

在渲染的过程中还有一些非常重要的概念：

样式计算

需要计算每一个呈现对象的可视化属性。这是通过计算每个元素的样式属性来完成的。

样式计算存在以下难点：

样式数据是一个超大的结构，存储了无数的样式属性，这可能造成内存问题。

如果不进行优化，为每一个元素查找匹配的规则会造成性能问题。要为每一个元素遍历整个规则列表来寻找匹配规则，这是一项浩大的工程。选择器会具有很复杂的结构，这就会导致某个匹配过程一开始看起来很可能是正确的，但最终发现其实是徒劳的，必须尝试其他匹配路径。

使用规则树计算样式上下文

在计算某个特定元素的样式上下文时，首先计算规则树中的对应路径，或者使用现有的路径。然后沿此路径应用规则，在新的样式上下文中填充结构。从路径中拥有最高优先级的底层节点（通常也是最特殊的选择器）开始，并向上遍历规则树，直到结构填充完毕。如果该规则节点对于此结构没有任何规范，那么可以实现更好的优化：寻找路径更上层的节点，找到后指定完整的规范并指向相关节点即可。这是最好的优化方法，因为整个结构都能共享。这可以减少端值的计算量并节约内存。

如果找到了部分定义，就会向上遍历规则树，直到结构填充完毕。

如果找不到结构的任何定义，那么假如该结构是“继承”类型，我们会在上下文树中指向父代的结构，这样也可以共享结构。如果是 reset 类型的结构，则会使用默认值。

如果最特殊的节点确实添加了值，那么需要另外进行一些计算，以便将这些值转化成实际值。然后将结果缓存在树节点中，供子代使用。

如果某个元素与其同级元素都指向同一个树节点，那么它们就可以共享整个样式上下文。

以正确的层叠顺序应用规则

样式对象具有与每个可视化属性一一对应的属性（均为 CSS 属性但更为通用）。如果某个属性未由任何匹配规则所定义，那么部分属性就可由父代元素样式对象继承。其他属性具有默认值。

如果定义不止一个，就会出现问题，需要通过层叠顺序来解决。（这儿有没有理解一点点什么是层叠？）

样式表层叠顺序

某个样式属性的声明可能会出现在多个样式表中，也可能在同一个样式表中出现多次。这意味着应用规则的顺序极为重要。这称为“层叠”顺序。根据 CSS2 规范，层叠的顺序为（优先级从低到高）：

浏览器声明

用户普通声明

作者普通声明

作者重要声明

用户重要声明

浏览器声明是重要程度最低的，而用户只有将该声明标记为“重要”才可以替换网页作者的声明。同样顺序的声明会根据特异性进行排序，然后再是其指定顺序。HTML 可视化属性会转换成匹配的 CSS 声明。它们被视为低优先级的网页作者规则。

特异性

选择器的特异性由 CSS2 规范定义如下：

如果声明来自于“style”属性，而不是带有选择器的规则，则记为 1，否则记为 0 (= a)

记为选择器中 ID 属性的个数 (= b)

记为选择器中其他属性和伪类的个数 (= c)

记为选择器中元素名称和伪元素的个数 (= d)

将四个数字按 a-b-c-d 这样连接起来（位于大数进制的数字系统中），构成特异性。

您使用的进制取决于上述类别中的最高计数。

例如，如果 a=14，您可以使用十六进制。如果 a=17，那么您需要使用十七进制；当然不太可能出现这种情况，除非是存在如下的选择器：html body div div p ...（在选择器中出现了 17 个标记，这样的可能性极低）。

特异性示例

绘制顺序

CSS2 规范定义了绘制流程的顺序。绘制的顺序其实就是元素进入堆栈样式上下文的顺序。这些堆栈会从后往前绘制，因此这样的顺序会影响绘制。块的堆栈顺序如下：

背景颜色

背景图片

边框

子代

轮廓

布局处理的方式

布局通常具有以下模式：

父元素确定自己的宽度。

父元素依次处理子元素，并且：

放置子元素（设置 x,y 坐标）。

如果有必要，调用子元素的布局,这会计算子元素的高度。

父元素根据子元素的累加高度以及边距和补白的高度来设置自身高度，此值也可供父元素的父元素使用。

关注“教授学苑”，期待带给你快乐的开发知识！