第三天的CSS笔记，整理了一下自己不是特别熟悉的部分，特别是CSS的求值部分。
选择器的特异度(Specificity)
特异度也称优先级 。下面列表中，选择器类型的优先级是递增的：
- 继承或者通配符选择器——0，0，0，0
- 元素选择器——0，0，0，1
- 类选择器、伪类选择器——0，0，1，0
- ID选择器——0，1，0，0
- 行内样式——1，0，0，0
!important——无穷大
优先级注意点：权值是由4组数字组成，但是不会有进位
继承
某些属性会自动继承其父元素的计算值，除非显示指定一个值。有些属性就是不能继承的，我们可以显式继承 如果从一个元素一层一层往上找，还是没有找到有一个CSS来指定这个值，或者说是可继承的但是一层一层都没有继承到。这个情况就要用到初始值的概念。
初始值
CSS中，每个属性都有一个初始值
background-color的初始值为transparent，margin-left的初始值为0
可以使用initial关键字显式重置为初始值，background-color: initial
CSS求值过程
首先浏览器拿到会对HTML进行一个解析，解析成一个树，那同样的在解析的过程中，我们会发现一些link或者style的样式，把样式也收集起来，都放在一起叫样式规则。
接下来浏览器要做的一件事情是为了布局或者渲染这个页面，他，需要去找到页面上每一个元素对应的每一个CSS属性的值，就要遍历到所有的元素，这个流程描述的是每一个元素，它的就是我在寻找一个特定的一个CSS属性首先筛选这些规则，比如说选择器是不是匹配。选择出来能够匹配到的值，叫做声明值，声明值是一组一个元素的某个属性可能有0个或者多个声明值。
两个声明值最终决定用哪一个呢？这个就要cascading来决定，这会有一个优先级的样式。按照来源，选择器特异性，书写顺序等等选择出一个优先级最高的一个属性值。这个被选出来的值就是层叠值。
有些时候层叠值是空的，那么就会继承或者使用初始值。总是能得到一个值的，但是这个值不能直接浏览器进行渲染，所以会进一步做转换，比如把em转化为px，相对路径转化为绝对路径。但不是所有的相对值会转化为绝对值。但是这个时候也不能直接用，有些情况下经过转化以后，有些东西是没有办法渲染的，比如是0.2px，这个时候只能四舍五入。
布局(Layout)是什么？
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术有三种，一种是常规流，一种是浮动还有一种是绝对定位。 在常规流里面又存在很多不同的布局方式：行级、块级、表格布局、FlexBox布局、Grid布局。
默认情况下我们指定盒子的高度宽度指定的是盒子的内容，如果还要指定padding和margin、border那就要在这个内容的基础上去扩展。宽度和高度的取值是数值、百分数和auto，容器有指定的高度时，百分数才生效。padding是指定元素四个方向的内边距，百分数相对于容器宽度，值按照顺时针的顺序。border是边框，指定容器边框样式、粗细和颜色，可以利用边框的特性来设置特殊的三角形。margin指定元素四个方向的外边距，取值可以是长度、百分数、aotu，百分数同样是相对于容器宽度。可以利用margin: auto来水平居中。外边距会出现外边距合并的情况，外边距只会取排版中外边距大一些的那个。
但如果盒子是border-box，那么设置的宽和高是包括了padding和border。在一般情况下是使用border-box。
块级：不和其他盒子并列摆放，适用所有的盒模型属性。块级元素生成块级盒子。
行级：和其他行级盒子一起放在一行或拆开多行，盒模型中的width、height不适用。行级元素生成行级盒子，行级盒子并列排在行盒里。
行级排版上下文(IFC)只包含行级盒子的容器会创建一个IFC。 IFC内的排版规则：
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
text-align决定一行内盒子的水平对齐vertical-align决定一个盒子在行内的垂直对齐- 避开浮动元素
块级排版上下文件(BFC)，某些容器会创建一个BFC：
- 根元素
- 浮动、绝对定位、
inline-block - Flex子项和Gird子项
overflow值不是visible的块和display: flow-root;
BFC内的排版规则：
- 盒子从上到下摆放
- 垂直
margin合并 - BFC内盒子的
margin不会与外面的合并 - BFC不会和浮动元素重叠
Flex Box是什么？
一种新的排版上下文，它可以控制子级盒子的：
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
display: grid
- 使元素生成一个块级的Grid容器
- 使用
grid-template相关属性将容器划分为网格 - 设置每一个子项占哪些行/列
几天的课下来，我发现其实课程主要作用还是帮大家整理复习，构建系统的知识结构，对于自己不够熟悉的地方老师是不会过多停留的，需要我们自己在课外进行拓展学习。
