CSS（三）|青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 5 天

重要内容

常规流Normal Flow

流：在 CSS 的常规的流里边，元素是按照某种流向去摆放的，比如从上到下、从左到右，所以常规流在许多文档里边也叫文档流，或者简称流。

1. 根元素、浮动和绝对定位的元素会脱离常规流

2. 其它元素都在常规流之内（in-flow）

3. 常规流中的盒⼦，在某种排版上下⽂中参与布局

相关的排版上下文有：

① 行级排版上下文（也叫⾏内格式化上下文）

② 块级排版上下文（也叫块级格式化上下文）

③ Table 排版上下文

④ Flex 排版上下文

⑤ Grid 排版上下文

行级排版上下文

·Inline Formatting Context （IFC）

·当IFC中有一个块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。

·只包含⾏级盒⼦的容器会创建⼀个 IFC，比如有一个 h1 标签，里边有文字，浏览器就会在 h1 里边创建 IFC，h1 里边的文字就会在 IFC 里边进行排版，之所以会创建 IFC 是因为 h1 是一个块级元素 ，h1 里边有文字，文字是行级的，没有其他的东西，这时候就只包含行级盒子的容器它会创建 IFC。

IFC 内的排版规则

1）盒⼦在一行内⽔平摆放

2）一行放不下时，换⾏显示（overflow-wrap: break-word;单词过长就在单词内换行）

3）text-align 决定一行内盒⼦的⽔平对齐

4）vertical-align 决定⼀个盒⼦在行内的垂直对齐

5）避开浮动(float)元素 *

### 块级排版上下文

 1）Block Formatting Context (BFC)

 2）某些容器会创建⼀个BFC

· 根元素

· 浮动、绝对定位、inline-block

· Flex⼦项和 Grid ⼦项

· overflow 值不是 visible 的块盒

·display：flow-root

BFC内的排版规则

·盒子从上到下摆放

·垂直margin合并

·BFC内盒子的margin不会与外面的合并

·BFC不会和浮动元素重叠

Flex Box

是一种新的排版上下文，它可以控制子级盒子的摆放的流向、顺序，盒子宽度和高度，水平和垂直方向的对齐和是否允许折行等。