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

行内元素

em a 非替换元素 img 替换元素

两者在内联内容处理方式不一样。

inline有时候被翻译成内联，比如inline content，有时候被翻译成行内 inline box。

行布局

行内元素只是生成一个框，没有其他内容（里面不能放框了可能）与之并存。

单行行内元素

多行行内元素

相邻两行之间的边框，firefox不重叠，上一行的下边界在下一行的上边界的下边，交错着的。似乎chrome是重合的不一样。

水平方向对齐方式 text-align

left right center justify

justify调整每行的word之间的空白，文本两侧和内容区两侧对齐。

基本术语和概念

匿名文本 anonymous

未包含在行内元素标签的文本。比如<p>inline</p>，p是块级元素，之中的文本inline没有被内联标签包括，为匿名文本。

em框

字符框，实际字形可能更高或矮，font-size决定了em框的高度。

内容区

非替换元素，em框串在一起构成框为内容区，或者字符字形描述的框构成内容区，也就是字体设计者设计的实际的大小。试了试每个浏览器不一样，比如设置一个内联非替换元素font-size：12px，内容区高度firefox的内容区高度14px，有时候不同的浏览器还不一样，浏览器应该是用的第二种方案。对于替换元素，内容区为固有高度加内外边距及边框。

行间距 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. 计算最后的行框的高度，一行各个行内框的最高的和最低的之间的距离。

行内格式化

line-height决定行框高度。

行内非替换元素

建立内容区

行内框 inline box

基线对齐之后，形成行框 line box

***

垂直对齐 vertical-align

行内框垂直对齐方式

top 行内框的顶部和行框的顶部对齐。bottom 类似

text-top 行内框的顶部和父元素的内容区顶部对齐。另有text-bottom

理解，text-top和内容区（由line-height）顶部对齐，top则是行框（内容区加上行间距）对齐。

关于vertical align 的文章 http://christopheraue.net/2014/03/05/vertical-align/

center 元素基线上0.5ex（ex为以行高作单位）

super 元素内容区和行内框上移 sub下移 可以设定为百分数。

***

管理line-height

如果line-height设置成一个绝对的值，比如14px，如果字体大小大于14px，行间可能会出现重叠。可将line-height 设置成1，表示line-height为font-size的一倍。

但，如果有边框的话，由于line-height不包括边框，也可能出现重叠，只有单独设置带边框的行内框的line-height。

***

缩放行高 line-height:后接数字表示font-size的倍数

***

增加框属性

border是绕着内容区+padding的，而不是line-height的。

上下边框、上下内边距及上下外边距不影响line-height对于非替换行内元素的布局。