Determine the baseline of each type of Box and the baseline of each type of Box

Determine the baseline of each type of Box and the baseline of each type of Box
Rule for determining the baseline of the Box 1.1 determine the baseline of the inline-block

The baseline of an 'inline-Block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visable', in which case the baseline is the bottom margin edge.

1.2 determine the baseline of the replacement

Bottom margin edge

1.3 determine the inline baseline

Is the baseline of the text it contains.

1.4 determine the inline-table baseline

The baseline of an 'inline-table' is the baseline of the first row of the table

1.5 determine the baseline of the block

Each block generally contains many row elements, so there are also many baseline items, each line corresponds to a line-box, line-box baseline determination is slightly complicated, see Chapter 2

1.6 determine the baseline of each line in the flex-box (may need to be changed in the future)

Use the baseline of the first line of the Flex-item with the highest height as the baseline of the current line of the flex-box.

1.7 determine the baseline of line-box (more complex)

• First, unlike other types of boxes, CSS 2.1 does not define the position of the line box's baseline, so its baseline is uncertain, it will change with the change of the content or style of the element in the row. For more information, see section 2.
• Which factors will affect the baseline position of line-box?
• When an elem in a row is at the same height as line-box
• The vertical-align set on this elem has no visual effect on the element because it has already reached the height of the current row, however, the baseline position of the current line-box is affected.
• When a row contains multiple vertical-align elements with different values, the baseline position of line-box also moves the baseline of line-box to the appropriate position to satisfy all vertical-align values at the same time, the height of line-box in Zhe often changes.