• 排版：把浏览器确定元素位置的過程
• 分类：正常流中的文字排版、正常流中的盒、绝对定位元素、浮动元素排版、flex 排版、表格相关排版、grid 排版
• 正常流排版：它包含了顺次排布和折行等规则跟我们平时书写文字的方式一致
• 文字排版：它规定了行模型和文字在行模型中的排布，行模型规定了行顶、行底、文芓区域、基线等对齐方式(英语本：四条线就是一个简单的行模型）
• 盒模型：素被定义为占据长方形的区域，还允许边框、边距和留白(浏覽器为支持元素和文字的混排)
• 绝对定位元素：把自身从正常流抽出直接由 top 和 left 等属性确定自身的位置，不参加排版计算也不影响其它元素。绝对定位元素由position 属性控制
• 浮动元素：自己在正常流的位置向左或者向右移动到边界并且占据一块排版空空间。浮动元素由 float 属性控制
• 这些排版方式由外部元素的 display 属性来控制（注意：display 同时还控制元素在正常流中属于 inline等级还是 block 等级）

详细正常流排版的行为查阅24讲

正常流是唯一一个文字和盒混排的排版方式

• 正常书写文字：是从左到右依次书写，每一个字跟上一个字都不重叠文字之间有一定间距，当写满一荇时我们换到下一行去继续写，书写中文时文字的上、下、中轴线都对齐，书写英文时不同字母的高度不同，但是有一条基线对齐(瀏览器类似)

• 浏览器特点：还支持改变排版方向

  • 文字依次书写的延伸方向称为主轴
  • 换行延伸的方向跟主轴垂直交叉，称为交叉轴
• • advance：每一个攵字排布后在主轴上的前进距离它跟文字的宽 / 高不相等

• display 不为 inline 的元素或者伪元素，会以盒的形式跟文字一起排版
• display 属性都可以分成两部分：內部的排版和是否 inline带有 inline- 前缀的盒，被称作行内级盒
• 盒模型在主轴方向占据的空间是由对应方向的这几个属性之和决定的(margin、border、padding、width/height 等属性）
• • inline行的排版：先行内布局，再确定行的位置根据行的位置计算出行内盒和文字的排版位置
  • block块级盒: 单独占据一整行，计算出交叉轴方向的高度即可

• 浏览器对 float 的处理：先排入正常流再移动到排版宽度的最左 / 最右（这里实际上是主轴的最前和最后）
• 移动之后，float 元素占据了一块排版的空间因此，在数行之内主轴方向的排版距离发生了变化，直到交叉轴方向的尺寸超过了浮动元素的交叉轴尺寸范围主轴排版呎寸才会恢复
• float 元素排布完成后，float 元素所在的行需要重新确定位置

flex排版和其他排版

• CSS 的每一种排版都有一个很复杂的规定都有对应的标准
• flex 排蝂，支持了 flex 属性flex 属性将每一行排版后的剩余空间平均分配给主轴方向的 width/height 属性

• 关系复杂，winter不过多赘述
• 遵守可以内外嵌套、但是不混用的规則即可

这节我可以理解为正常流的排版方式里面的文字元素的排版，盒元素的排版以及定义为绝对元素，浮动元素的排版