这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天
一、本堂课重点内容：
- css选择器的特异度
- css继承
- css求值过程解析
- css布局方式及相关技术
二、详细知识点介绍：
1. css选择器的特异度：
在多个选择器匹配到同一对象的情况下，选择器特异度越高，越优先采用。
例：
选择器的特异度：选择器的特殊程度，即id、（伪）类、标签项数对应值总和，id优先级>（伪）类>标签。
例：第一个按钮样式为.btn中样式，第二个按钮是.btn.primary样式。
2. css继承：
某些属性会自动继承其父元素计算值，除非显示指定。
一般来说文字属性可以继承，盒模型相关不可继承。
例：body标签内包含p标签，p标签内包含em标签和strong标签。图中所有元素都在body中，所以字体大小都继承body标签中的属性值。而p中指定了字体颜色为蓝色，则整段文字的颜色都为蓝色。p标签中，em标签内文字默认为斜体，且指定了字体颜色为红色，所以em标签内文字为红色斜体；strong标签未指定属性，因此只是在继承了父元素的属性基础上，将文字改变为标签默认设置的粗体。
显式继承：通过inherit关键字，让原本不可继承的元素可继承。
例：通过给通配选择器中的box-sizing设置inherit关键字，使得该属性可继承，然后在不需要该属性值的元素内部设置属性值进行覆盖。
当属性值未设置时，就会采用属性的初始值。
初始值：css中每个属性都具备一个初始值，例如background-color的初始值为transparent，如果在属性值被改变的情况下想恢复为初始值，可以使用initial关键字显式重置。
3. css求值过程解析：
首先，浏览器将html解析为一个dom树，拿到样式规则后进行筛选，找到匹配的选择器和条件，获得css样式。当匹配多个样式，即有多个声明值时，根据选择器特异度等，选出优先级最高的一个属性值作为层叠值。当层叠值为空，使用继承或初始值，获得必不为空的指定值。将指定值转化为绝对值后，得到最具体的计算值。再将计算值进行进一步转换后，获得使用值。
4. css布局方式及相关技术：
布局用于确定内容的位置和大小，需要根据元素、容器、兄弟节点和内容等信息来计算。
三种大的布局方式：常规流（行级、块级、表格布局、Flexbox、Grid布局）、浮动relative、绝对定位absolute。
盒模型：层级关系：margin > border > padding > Content。
height属性定义元素的高，width属性定义元素的宽。
padding（内边距）设置顺序：padding-left左边距、padding-right右边距、padding-top上边距、padding-bottom下边距。
属性值设置方式：
border（边框）：可以设置边框样式和颜色。
属性设置方式：
margin（外边距）：设置边框外与其他元素的距离。同上述两个padding设置方式一致。margin：auto可以设置元素水平居中。
box-sizing：设置margin内部空间的大小。
三、课后个人总结：
学会了css选择器的特异度的计算方式和对比方式、css继承原理，理解了css求值过程，懂得了css布局方式及相关技术，充分了解了css元素的属性以及布局在页面上的应用方式。
