这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。
一、课堂主要知识
1、CSS语法
CSS选择器 {
CSS属性：属性值
}
2、在页面中使用CSS的方法
（1）外链式
（2）内嵌式
（3）行内式
3、选择器作用
找到页面的元素，为它添加样式
4、CSS选择器类型
（1）通配符选择器*
（2）标签选择器
（3）类选择器
（4）id选择器
（5）属性选择器
（6）伪类选择器
（7）伪元素选择器（:before）
5、伪类选择器分类
（1）状态性伪类：比如链接状态有 :link :visited :hover :active
（2）结构性伪类: 在DOM节点中的位置 , 比如:first-child
6、选择器组合
直接组合AB
后代组合A B
亲子组合 A>B
兄弟组合 A~B
相邻组合 A + B
7、颜色属性
（1）rgb(0,0,0)——黑色
数值范围0-255，对应颜色红，绿，蓝的权重
（2）hsl(0-360,0-100%,0-100%)
色相、饱和度、亮度
（3）不透明度，权重0-1
rgba(0,0,0,0.5)
hsla(0-360,0-100%，0-100%,1)
8、行高属性 line-height
两行文字baseline的距离
比如line-height:1.6; 即行高是实际字体的1.6倍
9、CSS选择器权重
（1）通配符选择器 0
（2）标签选择器、伪元素选择器 1
（3）类选择器、属性选择器、伪类选择器 10
（4）id选择器 100
（5）行内样式 1000
（6）！import 最高
10、IFC:只包含行内盒子的容器会创建一个IFC
排版规则：
（1）盒子在一行内水平摆放
（2）一行放不下时，换行显示
（3）text-align决定一行内盒子的水平对齐
（4）vertical-align决定一个盒子在行内的垂直对齐
（5）避开浮动元素
11、BFC内的排版规则
（1）盒子从上到下摆放
（2）垂直margin合并
（3）BFC内盒子的margin不会与外面的合并
（4）BFC不会和浮动元素重叠
12、触发BFC条件
（1）根元素
（2）display为flex、inline-block、table-cell
（3）float属性不为none
（4）position为absolute或fixed
（5）overflow不为visible
二、个人总结
通过本次课程，我熟悉了CSS的基础知识比如选择器种类和对应权重、BFC和IFC。我的易错点有伪类选择器的种类，其中结构伪类选择器的p:first-child表示选择p标签的父元素的第一个孩子，若该标签不是p，则未选中。伪元素选择器的权重是1。
