深入CSS（下）|青训营笔记
这是我参与「第五届青训营 」伴学笔记创作活动的第4天
一、课程知识要点：
- 块级和行级的区别
- 行级排版上下文
- 块级排版上下文
- Flex Box 是什么?
- Grid布局
二、详细知识点介绍：
块级vs行级
行级的宽度和高度由里面的内容所决定。 盒子是CSS中的概念，块级盒子，行级盒子。
- 块级（Block Level Box）:不和其他盒子并列排放，适用于所有的盒模型结构，如
padding，margin。 - 行级（Inline Level Box）:和其他行级盒子一起放在一行或拆开成多行，盒模型中的
width、height不适用
行级排版上下文
- Inline Formatting Context(IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平放置；
- 一行放不下时，换行显示；
text-align决定一行内盒子的水平对齐；vertical-align决定一个盒子在行内的垂直对齐；- 避开浮动（float）元素。
块级排版上下文
- Block Formatting Context(BFC)
- 某些容器会创建一个BFC（根元素 ; 浮动、绝对定位、inline-block；Flex子项和Grid子项；overflow 值不是 visible 的块盒；
display: flow-root;） - BFC 内的排版规则
- 盒子从上到下摆放
- 垂直
margin合并 - BFC 内盒子的
margin不会与外面的合并 - BFC 不会和浮动元素重叠
display属性
inline-block理解为一张图片，不会拆成多行
超出容器范围就会换行：overflow-wrap:break-word;
Flex Box 是什么?
- 一种新的排版上下文
- 它可以控制子级盒子的:
- 摆放的流向 (→ ← ↑ ↓)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
Flexibility
- 可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
flex-grow有剩余空间时的伸展能力flex-shrink容器空间不足时收缩的能力flex-basis没有伸展或收缩时的基础长度
Grid布局
Flex Box 单一方向上;Grid二维的;
float文字环绕效果
三、课后总结：
学好CSS可以充分利用MDN和W3C CSS 规范；保持好奇心，善用浏览器的开发者工具；持续学习,CSS新特性还在不断出现。
