这是我参与「第四届青训营 」笔记创作活动的的第3天
本次笔记主要为CSS进阶（其实就是深入了一点点）知识
一、选择器的特异度（Specificity）
1.1、什么是特异度
特异度个人的理解就是选择器的“权力”大小，特异度越大，选择器的权力就越大，那么特异度高的选择器定义的CSS样式与特异度低的CSS样式发生冲突时，权力大的，也就是特异度高的将会决定CSS的样式
1.2、各种选择器的特异度
ID选择器>类选择器，属性选择器，伪类>类型选择器，伪元素
1.3、组合选择器的特异度
选择器的组合后的特异度是组合后的，不是简单的相加关系，不同优先级的选择器之前的权重相差的是数量级，也就是说不在一个数量级低的选择器数量再多组合起来也无法超过高优先级选择器
1.4、简单方式判断选择器权重的方法
这个适用于VScode，别的工具没用过，不清楚。
将鼠标放到选择器上，就会出现选择器权重，还能看到标签结构
二、继承
标签的属性有继承性，子元素的一些属性会自动继承父元素的属性，除非显式指定一个值
使用inherit继承父元素的属性
每个标签都有初始值，使用initial可以恢复标签的初始值，从而去除一些我们不想要的继承属性
三、CSS求值过程
CSS的求值过程还是比较复杂的，并非我想的那样简单，在实际开发的过程中，当发现CSS的实际值与预期的不一样的时候
四、布局
4.1、什么是布局
布局就是如何安排好页面内容的方法
4.2、布局相关技术
- 常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
- 浮动
- 绝对定位
目前flex布局和grid布局我自己使用的较多，能够让布局更轻松
这些都会在后面进行更为详细的介绍
五、两种盒模型
5.1、内容盒-content-box
结合上图理解，内容和的宽高是内容的宽高，整个盒子的宽高还要算上padding，margin，border的宽度
5.2、边框盒-border-box
设置的宽高是盒子的宽高，当padding，margin，border这些值增加的时候内容空间将会被压缩，更符合直观理解；
六、行级与块级
display属性
七、常规流-Normal-Flow
7.1、行级排版上下文
- Inline Formatting Context (IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 行放不 下时，换行显示
- text: align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
7.2、块级排版上下文
- Block Formatting Context (BFC)
- 某些容器会创建-个BFC
- 根元素
- 浮动、绝对定位、inline block
- Flex-子项和Grid子项
- overflow值不是visible 的块盒
- "display: flow-root;
- BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
7.3、Flex Box
- 种新的排版上下文
- 它可以控制子级盒子的:
- 摆放的流向
- 摆放顺序
- 盒子宽度和高度
- 是否允许折行
7.3.1、flex-direction
7.3.2、主轴与侧轴
7.3.3、justify- content
7.3.4、align- items
7.3.5、align-self
7.3.6、order
7.3.7、Flexibility
- 可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
- flex- grow有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex- basis没有伸展或收缩时的基础长度
7.4、Grid布局
7.4.1、与flex对比
flex支持了一维，grid则支持了二维。
7.4.2、grid的基本使用方式
八、总结
性质和规范实在太多，一个个记下来确实不现实，要多查阅官方文档
在实际开发中多运用，不断学习。
参考
菜鸟教程，MDN，青训营资料
