前言
记录青训营前端专场的学习过程，有不足的地方还请大佬指正。
由于本人基础比较薄弱，所以笔记尽可能的详细。

该文章开始的版本将以简述课程知识点为主，等后面实践有自己的理解后会编辑添加自己的理解

CSS基础知识

层叠

优先级

如图中例子，在上图中有三处对h1标签的color属性进行的定义。因此产生了冲突，为了解决冲突，需要了解CSS优先级。

层叠三大原则：

样式表重要性排序：

选择器优先级：

内联>id>属性值>标签类型
如图中第一行，"ul li.red"表示在ul标签下的li标签的red属性值，标签类型出现两次，属性值出现一次。因此它优先级是(0,1,2)。"#container:hover"表示id为container标签下的hover属性，因此id值出现一次，属性值出现一次，所以它的优先级是(1,1,0)。当这两条CSS规则都指向同一个标签的时候以第二条规则为准，因为它优先级更高。

源码顺序 当优先级一样的时候就看css规则在原码的位置

谁最后声明谁生效 该例子中的"h1"标签是绿色，因为在link在red后面声明，然后在index.css中，green在blue后面声明，所以"h1"标签是绿色。

由层叠概念引申出css代码的good practice：。

• 选择器尽量少用id
• 尽量不要用!important
• 自己的样式加载在引用库样式的后面

继承

CSS的值和单位

盒模型

布局

内联盒子水平方向按顺序排列，块级盒子在垂直方向上按顺序排列
常规流盒子参与也仅会参与一直格式化上下文布局