浏览器工作原理——step4 排版（整理）

step2和step3已经构建了DOM，计算了CSS属性，即给页面的DOM原则添加了用于展现的CSS属性，接下来就要继续流式地确定每个元素的位置。

浏览器最近的排版方案是正常流排版，包含了顺次排布和折行等规则。

在正常流的基础上，浏览器还支持两类元素：绝对定位元素和浮动元素。
绝对定位将自己从正常流抽出，直接由top和left等熟悉确定自身的位置，不参加排版计算也不影响其他元素。position
浮动元素使自己在正常流的位置向左或向右移动到边界，并占据一块排版空间。float
除了正常流，浏览器还支持其他排版方式，如现在非常常用的flex排版。display

浏览器的排版遵循工人的文字排版规范，文字排版规定了行模型和文字在行模型中的排布。行模型规定了行顶，行底，文字区域，基线等对齐方式。

浏览器支持元素和文字的混排，元素被定义为占据长方形的区域，还允许有边框、边距，这就是盒模型
由于不同语言的书写顺序不一致，浏览器的文本排版还支持双向文字系统。

1. 正常流文字排版

正常流是唯一一个文字和盒混排的排版方式。
书写文字时，中文的上、下、中轴线都对齐，英文的不同字母高度不同，但有一条基线对齐。
文字依次书写的延伸方向称为主轴方向（或主方向），换行延伸的方向 称为交叉轴（交叉方向）。
advance代表每个文字排布后，在主轴上的前进距离，这个值跟文字的 宽/高 不相等，是字体中最重要的属性。
除了字体提供的字形本身包含的信息，文字排版还受一些CSS属性的影响，如line-height、letter-spacing、word-spacing。
在正常流的文字排版中，多数元素被当做盒来排版，只有display为inline的元素是被拆成文本来排版的。display值为inline的元素中的文字，排版时会被直接排入文字流中，inline元素主轴方向的margin 属性和border属性也会被计算进排版前进距离当中。

2. 正常流中的盒

正常流中，display不为inline的元素或伪元素，会以盒的形式和文字一起排版。
多数display属性可以分成两部分，内部的排版和是否inline，带有inline-前缀的盒 被称作内级盒。
盒模型在主轴方向占据的空间由对应方向的几个属性之和决定的：margin、border、padding、width/height， 盒在交叉轴方向的位置由vertical-align决定，vertical-align也会影响实际行高。

浏览器对行的排版，一般是先行内布局，再确定行的位置，根据行的位置计算出行内盒和文字的排版位置。
块级盒 总是单独占据一整行，计算出交叉轴方向的高度即可。

3. 绝对定位元素

position为absoute的元素，从父级元素开始逐层找到position不是static的元素即可，根据此元素设置元素的位置

4. 浮动元素排版

浏览器对float元素的处理是先排入正常流，再移动到主轴的最前/最后。
移动之后，float元素占据了一块排版空间，在数行之内 主轴方向的排版距离发生了变化，知道交叉轴方向的持续你超过了浮动元素的交叉轴尺寸范围，主轴排版的尺寸才会恢复。
float元素排布完成后。float元素所在的行需要重新确定位置。

5. 其他的排版

css的每一种排版都有一个复杂的规定，实际的实现形式也各不相同。如flex排版，支持了flex属性，flex属性将每一行排版后的剩余空间平均分配给主轴方向的width/height属性。