阅读本文约需要10分钟

大家好，我是你们的导师，经常看我朋友圈的同学应该知道，我每天会在微信上给大家免费提供以下服务！

1、长期为你提供最优质的学习资源！

2、给你解决技术问题！

3、每天在朋友圈里分享优质的技术文章！

4、每周1、3、5送纸质书籍免费送给大家，每年至少送书800本书！

5、为大家推荐靠谱的就业单位！

请注意！我上面说的5点全部都是免费的！全网你应该找不到第二家吧！

当然，大家在我私人微信上问我问题，仅限回答web前端、java相关的。

---------------------------

好了，接下来开始今天的技术分享！上次老师跟大家分享了React 面试知识点的知识，今天跟大家分享下CSS之 浏览器解析样式的过程的知识。

1 解析一旦 CSS 被浏览器下载，CSS 解析器就会被打开来处理它遇到的任何CSS。这可以是单个文档内的CSS、例如，考虑以下 CSS:

.fancy-button {    background: green;    border: 3px solid red;    font-size: 1em;}

以上 CSS 片段将生成如下数据结构，以便在后续的过程中方便使用：值得注意的一件事是，浏览器将 background 和 border 的简写还原成普通写法，也就是一个一个属性的声明，因为简单写主要方便开发人员的编写，但从这里开始，浏览器只处理普通写法。完解析成之后，浏览器引擎继续构建 DOM 树。2 计算既然我们已经解析了现有内容中的所有样式，接着就是对它们进行样式计算了。我们尝试尽量对所有值减少到一个标准化的计算值。当离开计算阶段时，任何维度值都被缩减为三个可能的输出之一:auto、百分比或像素值。为了清晰起见，让我们看几个例子，看 web 开发人员写了什么，以及计算后的结果:现在我们已经计算了数据存储中的所有值，是时候处理级联了。3 级联由于 CSS 来源有多种，所以浏览器需要一种方法来确定哪些样式应该应用于给定的元素。为此，浏览器使用一个名为 特殊性(specificity) 的公式，它计算选择器中使用的标记、类、id 和属性选择器的数值，以及 !important声明的数值。通过内联 style 属性在元素上定义的样式被赋予一个等级，该等级优先于 同一级别的个数，数量多的优先级高，假设同样即比较下一级别的个数。至于各级别的优先级例如以下：!important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承选择器的特殊性由选择器本身的组件确定，特殊性值表述为5个部分，如：

0，0，1，0，1

(1)、对于选择器中给定的各个 !important 属性值，加 1，0，0，0，0 。(2)、对于选择器中给定的各个ID属性值，加 0，0，1，0，0 。(3)、对于选择器中给定的各个类属性值、属性选择器或伪类，加 0，0，0，1，0 。(4)、对于选择器中给定的各个元素和伪元素，加 0，0，0，0，1 。伪元素是否具有特殊性？在这方面CSS2有些自相矛盾，不过CSS2.1很清楚的指出，伪元素具有特殊性，而且特殊性为 0，0，0，0，1，同元素特殊性相同。(5)、结合符(+ > [] ^= $= 等等特殊符号)和通配符(*)对特殊性没有任何贡献，此外通配符的特殊性为 0，0，0，0，0。全是 0 有什么意义呢？当然有意义！子元素继承祖先元素的样式根本没有特殊性，因此当出现这种情况后，通配符选择器定义的样式声明也要优先于子元素继承来的样式声明。因为就算特殊性是0，也比没有特殊性可言要强。为了说明这一点，让我们说明一些选择器及其计算后的权重数值:而当优先级与多个CSS声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。在下面的示例中，div 将具有蓝色背景。

div {  background: red;}
div {  background: blue;}

现在CSS将生成以下数据结构，在本文中，我们将继续在此基础上进行构建。来源CSS也有来源，但它们的用途不同:CSS信息可以从各种来源提供，这些来源可以是 用户(user) 和 作者(author) 及 用户代理/浏览器(user agent)，优先级如下：用户样式浏览器还允许用户设置网页的样式，例如，我们用IE浏览网站的时候，都可以通过浏览器查看菜单下的样式或者文字大小子菜单来设置网页实际的显示效果。作者样式网页创建者建立的样式表，一般会css文件出现或者是在页面头部里定义的style，也就是网站源代码的一部分。例如，大家看百度和谷歌的页面就不一样，这就是作者样式不一样的结果。用户代理/浏览器样式也就是浏览器自身设置用来显示网站的样式，不同的浏览器可能有不同的样式表，例如IE和Firefox的就不一样，所以大家分别使用这两种浏览器访问同一个网站的时候，看到实际效果可能就不同。通常情况下，作者样式具有最高的重要性，其次是用户样式，最后才是浏览器样式，但是如果出现了 !important 标记的话，那么规则会被改变，通过 !important 可以提高某种样式的重要性，让它的优先级高于其他没有加该声明的所有样式。让我们进一步扩展我们的数据集，看看当用户将浏览器的字体大小设置为最小 2em 时会发生什么:做级联当浏览器拥有一个完整的数据结构，包含来自所有源的所有声明时，它将按照规范对它们进行排序。首先，它将按来源排序，然后按特性(specificity)排序，最后按文档顺序排序。从上图可知，类名为 .fancy-button优先级最高(表中越上面优先级越高)。例如，从上表中，人会注意到用户的浏览器首选项设置优先 于Web 开发人员的设置样式。现在，浏览器找到与选择器匹配的所有 DOM 元素，并将得到的计算样式挂载到匹配的元素，在本例中 div 为类名为 .fancy-button：如果您希望了解更多关于级联的工作原理，请查看官方规范。CSS对象模型虽然到目前为止我们已经做了很多，但还没有完成。现在我们需要更新 CSS对象模型(CSSOM)。 CSSOM 位于document.stylesheets 中，我们需要对其进行更新，以便让它知道我们目前为止已经解析和计算的所有内容。Web 开发人员可能在没有意识到的情况下使用这些信息。例如，当调用 getComputedStyle() 时，如果需要，运行上面指出的相同过程布局现在我们已经应用了一个具有样式的 DOM 树，然后开始构建一个用于可视化目的的树了。这棵树出现在所有现代引擎中，被称为盒子树(box tree)。为了构造这棵树，我们遍历 DOM 树并创建零个或多个 CSS 盒子，每个盒子都有一个 margin、border、padding 和 content 。在本节中，我们将讨论以下 CSS 布局概念:格式化上下文(FC)：有许多类型的格式化上下文，其中大多数 Web 开发人员通过更改 display 元素的值来调用。一些最常见的格式化上下文是块(块格式化上下文或BFC)，flex，grid，table-cells 和 inline。其他一些CSS也可以强制使用新的格式化上下文，例如 position: absolute，float 或使用 multi-colum。包含块:这是用于解析样式的祖先块。内联方向：这是文本布局的方向，由元素的书写模式决定。 在拉丁语言中，这是水平轴，在 CJK 语言中，这是垂直轴。块方向：此行为与内联方向完全相同，但与内联轴垂直。因此，对于基于拉丁语的语言，这是垂直轴，而在CJK语言中，这是水平轴。解析 Auto请记住，在计算阶段，维度值可以是三个值之一:auto、百分数或像素。布局的目的是在Box Tree中调整所有盒子的大小和位置，使它们为绘制做好准备。下面示例可以更容易地理解Box Tree是如何构建的。为了便于理解，这里不显示单独的CSS框，只显示主盒(principal box)。让我们看看一个基本的 “Hello world” 布局使用以下代码:

Hello world