之前学习前端知识只是对着教程啃，搬砖式地按照格式使用和开发，因为对于实际的原理和解析过程没有很清晰的认知，样式排版什么的出了问题也很难找到问题点。参加本次青训营的初衷是想借此机会系统地按照路线学习一下，并记录一下之前学习过程中忽略的那些”必学点“。
- CSS 选择器
1. 选择器特异度
选择器的特异度决定了选择器的优先级。若不同的选择器选中相同元素时，该元素的样式按照优先级高的选择器设置。
浏览器是基于如下CSS 三大特性来选择元素按照哪个选择器样式进行渲染的。
-
层叠性:一个标签存在两个选择器,若样式冲突,采用就近原则,若不冲突则保留;
-
继承性:子标签继承父标签的样式 , 如text-样式 | font-样式 | line-样式 | color样式
-
优先级:
-
选择器相同,执行层叠性;
-
选择器不同，按照下述权重进行优先级计算：
注：在权重叠加计算上，遇到复合选择器,就会有权重叠加,权重按照四组唯一的单位,不会进位计算。
选择器权重的实例计算如下：
-
2. 属性继承
元素的某些属性会自动继承其父元素的计算值，除非显式指定一个值。 一般来说，和元素模型相关的属性是不继承的，例如宽度等，而和文字相关的是可以继承的，例如文字颜色和文字大小等。 若需要元素的不可继承属性继承父元素的属性大小，可以采用显式继承(设置inherit的方式实现；
*{
box-sizing: inherit;
}
html {
box-sizing: border-box;
}
.some-widget {
box-sizing: content-box;
}
若元素的属性继承默认往父级向上找但没有继承到就会采用初始值设置样式。可以使用initial关键字显式重置为初始值。
- CSS 求值过程
CSS求值需要经过一次匹配、一次优先级计算、一次声明值判定（判空与默认取值处理）、两次转换（相对值、关键字转换）、一次取整，最终得到声明属性值的渲染值。
前提：浏览器收集css样式规则并解析到一个规则数组，根据规则数组进行求值计算才能得到元素的实际渲染值。
- 【filtering】浏览器解析HTML构成DOM树后，浏览器会根据DOM树和样式规则对应用到当前HTML页面的规则进行选择器匹配（遍历当前所有元素找到对应选择器和声明）、属性有效判定、符合当前media等筛选操作。
- 【cascading】匹配筛选完成后会得到一组能够匹配到的声明值，接着浏览器会根据来源、！important、选择器特异性、书写顺序等选出优先级最高的一个属性值。这个在层叠过程中选出来的优先级最高的值被称为层叠值。
- 【defaulting】若层叠值为空浏览器就会采取属性继承或默认的初始值给元素设置指定值。
- 【resolving】浏览器拿到指定值后需要将一些相对值或关键字转化成绝对值，例如将em转为px、图片相对路径转为绝对路径等，转化完成后就能拿到一个计算值。但resolving的转换并不能完全处理关键字和相对值，需要按照实际设备布局信息辅助计算的值还需要经过一次转换计算（formatting）。
- 【formatting】可以将计算值进一步转换，将关键字、百分比等转为绝对值，得到一个进行实际布局时使用的值——使用值。
- 【constraining】但使用值可能包含小数，因此还需要经过取整的过程，最终得到实际渲染生效的值。
