这是我参与「第四届青训营 」笔记创作活动的的第3天
深入CSS
CSS选择器优先级
首先贴上本部分的参考文档：深入理解CSS选择器优先级，建议对文档进行阅读。
下面开始讲解：
我们先明确一点，样式的优先级一般为：!import > style > id > class > 元素,记住这个原则，相信在判断简单的样式优先级时就没有问题了。然而在实际使用中，我们常常遇到多类选择器判断优先级的问题，那么遇到这个问题该如何解决呢？
优先级由A、B、C、D四个值进行判断，其中对应值计算规则如下：
- 如果存在内联样式则A为1，否则为0；
- B为ID选择器出现的个数；
- C为类选择器、属性选择器、伪类选择器出现的个数；
- D为标签选择器和伪元素选择器出现的个数
将ABCD进行按顺序进行组合，组合数字最大的，优先级更高，当优先级相同时，遵循后面的优先级更高的原则。
样式属性的覆盖与冲突
关于继承可参阅此文档
覆盖：当样式属性相同的情况下，遵循优先级高的覆盖优先级低的，后面的覆盖前面的这个原则。
继承：当样式属性没有设置且可以继承的时候，其会自动继承父元素中的样式属性计算值，需要注意的是这里继承的是样式的计算值，而不继承相对值。也可以使用inherit属性值来进行显式继承。
初始值：属性的默认初始值，CSS中的每个属性都有一个初始值。
CSS的属性计算过程
如图所示，是一个CSS的属性计算过程，其流程描述如下：
- HTML解析成DOM树，解析过程中将从CSS中搜集的样式放在一起组成样式规范；
- 对样式规范进行筛选，获得符合规则的一组声明值；
- 按照优先级顺序选出优先值最高的属性值即层叠值；
- 若层叠值为空，此时采用继承或使用初始值的方法得到指定值（指定值一定不为空）；
- 将一些相对值转换为绝对值，从而获得计算值（此时，属性值之中的关键字、百分比等还没有转换）；
- 进一步将计算值转换从而获得使用值（此时的使用值中存在小数）；
- 将小数转换为整数，从而得到实际值。
计算值和使用值的区别：单纯的分析CSS和HTML就可以得到的值即为计算值，使用者需要结合实际环境才能得到的值为使用值。继承的属性值为计算值。
布局
CSS中布局的相关技术分为三种：分别为文档流、浮动和绝对定位。
盒模型
在讲布局之前，首先讲一下盒模型。
盒模型一共有两种，分别为content-box 和 border-box，上图就是一个content-box盒模型。
这两种盒子模型都是由content + padding + border + margin组成，但是不同的是，他们的width和height的计算方式不同。
在content-box盒中，width和height只包含content；
在border-box盒中，width和height由content + padding + border组成。
需要注意的是，当width和height的值设为百分比时，其基数取决于父元素的对应属性，而当padding、margin、border取百分比的时候则基数都取决于父元素的width。
盒模型的转换可以使用box-sizing属性进行转换，对应值分别为content-box和border-box。
对于border属性的介绍，课上并不是很详细，老实说，我觉得介绍的还蛮少的，希望深入了解的请参阅此文档
over-flow: 溢出，取值为四种，分别为visible、hidden、scroll、auto。
块级盒子和行级盒子的比较
可以通过display属性进行块级盒子与行级盒子的转换。
行级排版上下文IFC与块级排版上下文BFC
对于BFC深入学习可参阅此文档，可能是最好的BFC解析了...
flex box
对于flex弹性布局，可参阅Flex 布局教程进行学习。
也建议通过这个链接在PC端进行学习：flexboxfroggy.com/
Grid布局
同样贴上学习链接，grid布局
在这里讲解一下grid布局的基本思想，即先画表格，再按照表格将元素填入其中
浮动
由于弹性布局的存在，建议将浮动回归至原本的图文排版中。
position：
relative：在文档流中布局，相对于自己本来的位置进行偏移，使用top、left等进行偏移，流内其他元素当它没有偏移一样布局。
absolute：脱离文档流，相对于最近的非static祖先定位，不会对流内元素布局造成影响。
fixed：脱离文档流，位置总是相对于视口固定。
sticky：粘性布局，元素首先会被相对定位，直到在视口中遇到给定的偏移值为止，之后固定在适合的位置。可参阅此文档mdn-position。
