CSS权威指南 - 基础视觉格式化2

Posted 2020-06-18

行内元素

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就会影响形成的行内框的高度。

行框的形成：

1. 确定行内框的高度。行内非替换元素为line-height减去font-size，平分两份，在font-size确定的em框上下放置，形成行内框，行内替换元素，行内框由margin，padding，border加起来。
2. 对各个内容区，内容区的各个元素及匿名文本的基线位置，替换元素就没有基线，用底部，然后对齐。
3. 根据vertical-align 调整垂直偏移量。行内框要上/下移动多少。
4. 计算最后的行框的高度，一行各个行内框的最高的和最低的之间的距离。