行内元素
em a 非替换元素 img 替换元素
两者在内联内容处理方式不一样。
inline有时候被翻译成内联，比如inline content，有时候被翻译成行内 inline box。
行布局
行内元素只是生成一个框，没有其他内容（里面不能放框了可能）与之并存。
单行行内元素
多行行内元素
相邻两行之间的边框，不重叠，上一行的下边界在下一行的上边界的下边，交错着的。
对齐方式
left right center justify
justify调整每行的word之间的空白，文本两侧和内容区两侧对齐。
基本术语和概念
匿名文本 anonymous
未包含在行内元素标签的文本。比如<p>inline</p>，p是块级元素，之中的文本inline没有被内联标签包括，为匿名文本。
em框
字符框，实际字形可能更高或矮，font-size决定了em框的高度。
内容区
非替换元素，em框串在一起构成框为内容区。对于替换元素，内容区为固有高度加内外边距及边框。
行间距 leading
font-size 减去 line-height 为行间距，均分两份（half-leading）放在内容区上下。
行内框 inline box
行内框就是行间距加上内容区。行内框高度的决定：非替换元素的行内框的高度line-height，替换元素内容区高度加内外边距和边框。
行框 line box
不同于行内框，行框是指一行（可能有多个行内框）中的最高的行框到最低行框的距离。
一行如何一步步构成一个行框
一些概念的解释：
- 内容区类似于块级元素的内容框。
- 行内元素背景应用于内容去和内边距。和块级元素一样。
- 行内元素的边框（指想象的盒子边界而不是盒子模型的border）包括内容区和边框。
- 非替换元素的padding margin 不影响形成的行内框的高度。have no vertical effect on inline elements or the boxes they generate
- 替换元素的padding margin就会影响形成的行内框的高度。
行框的形成：
- 确定行内框的高度。行内非替换元素为line-height减去font-size，平分两份，在font-size确定的em框上下放置，形成行内框，行内替换元素，行内框由margin，padding，border加起来。
- 对各个内容区，内容区的各个元素及匿名文本的基线位置，替换元素就没有基线，用底部，然后对齐。
- 根据vertical-align 调整垂直偏移量。行内框要上/下移动多少。
- 计算最后的行框的高度，一行各个行内框的最高的和最低的之间的距离。
时间： 2024-08-02 11:03:50