原文地址：https://mp.weixin.qq.com/s/5J3PMHm_Kq8BPyBZNGNKag
下面是读后感：
一旦 CSS 被浏览器下载，CSS 解析器就会被打开来处理它遇到的任何CSS。所 有CSS（行内CSS、<style>标记内的CSS，也可以是（js控制的）DOM元素的style属性内嵌的 CSS）都根据语法规范进行解析和标记。
解析完成后，就会生成有一个包含所有选择器、属性和属性各自值的数据结构。
首先解析和计算属性与属性值
1解析已有内容的样式
如下，每个属性都会被单独拆分，并标出完整名字：
解析出所有内容的样式，然后就是对样式计算：
2计算样式
计算样式，会将所有的值返回标准格式的值：'auto',px,百分百%。
下面是计算优先级
3.1级联
级联就是计算下面各个类的值，优先级高的类，其值也大。
！import怎么用：
直接将字符串' ! import '加在style里面，样式后面，如下图：
需要注意：行内的style和内联style的写法不一样！
比如，同样代表背景颜色，一个是bgcolor，一个是background-color
3.2 CSS来源：
CSS信息可以从各种来源提供，这些来源可以是 用户(user) 和 作者(author) 及 用户代理/浏览器(user agent)，优先级如下：
user:
浏览器如safari，提供给用户设置文字大小等功能
author:
网站创建者建立的样式。一般是开发人员写在头部的<style>CSS</style>标签里。
user/agent：
浏览器自身显示的样式。不同浏览器不一样。(浏览器=代理agent)
一般来讲，三者的优先级依次是：
author > user > user/agent
通过!important会改变优先级。
其次触发CSS对象模型
现在我们需要更新 CSS对象模型(CSSOM)。 CSSOM 位于document.stylesheets 中，我们需要对其进行更新，以便让它知道我们目前为止已经解析和计算的所有内容 。
布局*：
创建一个具有样式的DOM树，也是box tree 盒子树。遍历DOM树，并生成不定个数的CSS盒子。
每一个盒子都有一个margin / border / padding /content
解析auto:
css解析下面代码：
<body>
<p>Hello world</p>
<style> body { width: 50px; }</style>
</body>
1 bod 浏览器从 body 元素开始，生成它的主盒(principal box)，它的宽度为50px，默认高度为auto。
2 p 现在移动到 p 标签并生成其主盒(principal box)，并且由于 p 标签默认有边距（margin）（前后一个回车符的距离），这将影响正文的高度
3 content 处理字符串"hello world",这是 DOM 中的文本节点。因此,在布局中生成一个行内盒(line box)。请注意，文本溢出了正文.
因为加上“world”长度后实际长度比较设置大并且我们没有设置 overflow 属性，所以引擎会向其父级报告它在布局文本时停止的位置。
由于没有设置overflow，因此，会高度会是auto 。
处理浮动：float
了解片段：fragment
绘制：painting
回顾一下我们现在的情况，我们取出所有的 CSS 内容，对其进行解析，将其级联到DOM 树中，并完成布局。但是我们还没有对布图应用颜色、边框、阴影和类似的设计处理——处理这些过程被称为绘制
绘制的顺序依次是 1 background / 2 border / 3 content 如下图：
z-index
组成composition
创造互动的视觉：伪类
比如:hover ,鼠标悬浮时候，内部将之前的DOM元素中的样式挂起-->跳过布局，直接绘制新图，传递给用户界面。
现在我们需要更新 CSS对象模型(CSSOM)。 CSSOM 位于document.stylesheets 中，我们需要对其进行更新，以便让它知道我们目前为止已经解析和计算的所有内容
