这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
什么是CSS：
1.Cascading Style Sheets
2.用来定义页面元素的样式
（一）：设置字体和颜色
（二）：设置位置和大小
（三）：添加动画效果
CSS如何工作：
加载HTML---解析HTML---创建DOM树---展示页面
| |---添加样式到DOM节点
加载CSS---解析CSS
选择器Selector：
1.找出页面中的元素
2.使用多种方式选择元素
（一）：按照标签名，类名或id
（二）：按照属性
（三）：按照DOM树中的位置
常用的选择器：
1.元素选择器
2.类选择器（例如：<p class='A'>111</p>p>
3.id选择器（例如：<p id='A'>111</p>
4.通配符选择器（例如：*{}）
关系选择器：
1.后代选择器
2.子代选择器
3.相邻兄弟选择器
4.通用兄弟选择器
伪类选择器：
1.否定伪类
（一）：:not() 将符号条件的元素去除
2.元素的伪类
（一）：:hover 鼠标移入后元素的状态
（二）：:active 鼠标点击后，元素的状态
常见的伪类选择器：
1.::before 元素开始的位置前
2.::after 元素结束的位置后
3.::first-letter 表示第一个字母
4.::first-line 表示第一行
选择器的特异度：选择器的特殊程度
布局的概念：
1.确定内容的大小和位置的算法
2.依据元素，容器，兄弟节点和内容等信息来计算
块级排版上下文：
1.某些容器会创建一个BFC
（一）根元素
（二）浮动，绝对定位，inline-block
（三）Flex子项和Grid子项
（四）overflow值不是visible的块盒
（五）display：flow-root
2.BFC
BFC内的排版规则：1.盒子从上到下摆放
2.垂直margin合并
3.BFC内盒子的margin不会与外面的合并
4.BFC不会和浮动元素重叠
Flex Box是什么：
1.一种新的排版上下文
2.它可以控制子级盒子的：
（一）：摆放的流向
（二）：摆放的顺序
（三）：盒子的宽度和高度
（四）：水平和垂直方向的对奇
（五）：是否允许折行
FiexIbility：
1.可以设置子项的弹性：当容器有剩余空间时，会伸展’容器空间不够时，会收缩
2.fiex-grow有剩余空间时的伸展能力
3.flex-shrink容器空间不足时收缩的能力
4.flex-basis没有伸展或收缩时的基础长度
个人思考
保持好奇，时刻努力。多去练习。
总结：
1.了解CSS的布局
2.CSS的概念
3.CSS的选择器
4.CSS的各类样式
