这是我参与「第五届青训营 」笔记创作活动的第1天。
上节课我们学习了CSS的基础概念，这节课我们深入学习CSS的其他概念以及在布局中的应用。
本节重点：
- CSS选择器的特异度
- CSS属性的继承
- CSS盒子模型
- 块级、行级元素；块级、行级排版上下文
- flex布局
- 定位 position
本节难点：
- CSS属性值的计算过程
- Grid布局
CSS选择器的特异度
当有多条不同的规则选中同一个元素，哪一条规则会生效呢？
这里我们需要引入一个新的概念：选择器的特异度。它的值通过计算规则中id、（伪）类、标签选择器的数量得到。
通过比较特异度的大小，特异度大的规则将会生效。
CSS属性的继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值。比如color属性。在CSS中，一般和文字相关的属性都可以继承，而和盒模型相关的属性不能继承。
对于不继承的属性，如果我们想要其继承父亲对应属性的值能否实现？答案是有的，我们可以通过显式继承实现。
通过将属性值设置为关键字inherit，可以实现显式继承。
例如：
.parent {
width: 50px;
}
.child {
width: inherit;
}
CSS属性的初始值
CSS属性值的计算过程
计算过程如下图所示：
（接下图）
（接下图）
计算值和使用值的区别：
计算值是根据html和css文件就能计算出来的值，比如20%，只需要看父元素的属性值就能计算出来；
而使用值得根据实际的渲染环境进行计算，在用户使用之前，因为无法确定用户的使用环境（浏览器类型、屏幕大小等），所以无法进行计算。
注意：前面讲到的CSS继承，继承的就是父亲的计算值，比如父亲的属性值为1.2em，计算过后是20px，那么继承时会继承20px而不是1.2em
布局
CSS的布局涉及到许多问题与技术，相关的技术总结如下：
接下来我们将一一学习以上技术。
盒子模型
box-sizing
盒子模型的宽高默认是content的高度，如果想让盒子模型的宽高表示content+padding+border的之后的宽高，可以设置box-sizing：border-box
overflow
当盒子内的文字超出盒子大小时，可以通过overflow属性设置处理方式。它的取值如下：
- visible：保留溢出部分可视
- hidden：隐藏溢出部分
- scroll：设置滚动
块级、行级元素
块级元素
常见的有body、article、div、main、section、h1-6、p、ul、li
行级元素
常见的有span、em、strong、cite、code
行级排版上下文
块级排版上下文
BFC的排版规则如下：
flex
flex容器上的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
flex子项上的属性
-
flex-basis
-
flex-grow
剩余空间的分配比例，不指定时分配比例默认为0（元素不会自动填充剩余空间）
-
flex-shrink
溢出空间的分配比例，不指定时分配比例默认为1（所有元素等比例压缩）
-
flex
flex为以上三个值的汇总，各种取值情况如下：
Grid
有了flex布局，我们为什么还需要Grid布局？因为flex布局是一维的，有时候我们发现页面元素的布局不只是从左到右，从上到下的布局，而是二维，这时候就需要Grid布局才能更好的解决。
grid-template-columns、grid-template-rows
我们使用grid-template-columns、grid-template-rows来划分网格。
grid-template-columns定义每一列每个格子的宽度。
grid-template-rows定义每一行每个格子的高度。
浮动 float
可以实现文字环绕图片的效果。
定位 position
1、相对定位 position: relative
相对于父元素进行偏移
2、绝对定位 position: absolute
从父元素往上至根元素为止，找到第一个值不为static的元素，相对于该元素进 行偏移（父元素都不指定时默认为static，会相对根元素进行偏移）
3、固定定位 position: fixed
相对于可视窗口进行偏移（与父元素无关）。可以用于实现导航栏无论上下滚动都固定在屏幕上不动。
脱离了常规流。不会对流内元素布局造成影响。
4、粘性定位 position: sticky
静态时相当于relative，当页面滚动到一定位置时变成fixed固定定位
补充：父子流之间的关系是相对独立的。例如父元素使用了绝对定位脱离了常规流，但对于里面的子元素来说，父元素为他们创建了一个新的常规流，则子元素会按照新的流的规则进行排列。
学习CSS的几点建议
最后给大家一些学习CSS的建议：
CSS的内容繁多，并且不断有新的特性出现，希望大家都能坚持学习，不断进步。路漫漫其修远兮，吾将上下而求索。
本节小结
本节课我深入学习了CSS有关优先级和继承的相关概念，了解到CSS属性值的完整计算过程是怎样子的，接着学习了CSS中的重点----布局的基本概念，比如盒子模型、块级、行级元素等，以及涉及的各种技术，比如flex、Grid、浮动、定位等。至此我们的CSS课程算是完结，下节课我们将正式进入JavaScript的学习。
