CSS2学习笔记12

基本布局(行内元素)

系列文章

基本术语

先回顾一些基本术语：

匿名文本
匿名文本(anonymous text)是指所有包含在行内元素的字符串。空格也是匿名文本的一部分。
em框
在字体中定义，也称为字符框(charater box)。实际的字形可能比em框更高或矮。
内容区
内容区可以是元素中各字符的em框串在一起构成的框，也可以是由元素中字符字型描述的框。
行间距
行间距(leading)是 font-size 与 line-height 值之差。这个差分为两个半间距(half-leading)，分别应用到内容区的顶部和底部。
行间距只应用于非替换元素。
行内框
通过内容区增加行间距来描述。对于非替换元素，元素行内框的高度刚好等于 line-height 的值；对于替换元素，则等于内容区的高度。
行框
是包含该行中出现的行内框的最高点和最低点的最小框。

由此，CSS提供了一些行为和有用的概念：

行布局

以下是构造行框的步骤：

  1. 按以下步骤确定行中各元素行内框的高度：
    1. 得到各行内非替换元素及不属于后代行内元素的所有文本的 font-size 值和 font-line-height 值。由 font-line-height 减去 font-size 得到框的行间距，将其一半分别应用到em框的顶部和底部。
    2. 得到各替换元素的 height 、margin-top 、margin-bottom 、padding-top 、padding-bottom 、border-top-width 和 border-bottom-width 值，把它们加在一起
  2. 对于各内容区，确定它在整行基线的上方和下方分别超出多少。
  3. 对于指定了 vertical-align 值的元素，确定其垂直偏移量。由此可知该元素的行内框要向上或向下移动多远，并改变元素在基线上方或下方超出的距离。
  4. 将基线与最高行内框顶端之间的距离加上基线与最低行内框底端之间的距离，即为行框高度。

行内格式化

行的高度（行框的高度）由其组成元素和其它内容的高度确定。

line-height 只会影响行内元素和其它行内内容，而不会影响块级元素。

可以为一个块级元素设置 line-height 值，并将这个值应用到块中的所有内容，而不论内容是否包含在行内元素中。

行内非替换元素

当 font-size 比 line-height 大时，行内框会小于内容区。

如果改变行内框的垂直对齐，会应用同样的高度确定原则。

利用本章的概念，vertical-align 各个关键字值的效果如下：

如果需要为行内元素加上边框，为了防止边框覆盖其它行的内容，可以适当增加 line-height ，从而提高行框的高度，避免与其它文本重叠。

基线与行高

各行框的具体高度取决于其组成元素相互之间如何对齐，这主要依赖于字体设定的基线位置。

设置 line-height 的最好方法是使用一个具体的数值，该数值会变成继承值作为缩放因子。

行内元素基本上会作为一行放置，然后分成多个部分。
如果向行内元素应用左右的外边距，这些外边距将作用于开头或末尾。
如果向行内元素应用上下的内边距，它并不会增加行框的高度，可能会导致背景色覆盖相邻行的内容。

行内替换元素

一般认为行内替换元素有确定的高度和宽度。有确定高度的替换元素可能导致行框比正常行框要高，但这并不会改变lh值。

行内替换元素的 line-height 值用于 vertical-align 垂直对齐等。

行内替换元素的内边距和边框会影响行框的高度，为行内替换元素增加内边距、边框和外边距会增大其行内宽。
负外边距会使替换元素的行内框小于正常大小。

如果表单元格中含有图像，表单元格要足够高，从而能把包含该图像的行框包含在内。

改变元素显示

可以为属性 display 设置一个值来影响用户代理显示的方式：

display
值：
none | inline | block | inline-block | list-item | run-in | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | inherit
初始值：
inline
应用于：
所有元素
继承性：
无
计算值：
对于浮动、定位和根元素，计算值可变（以后介绍）；否则，根据指定确定

使用 display 可以改变一个元素的角色，将其更改为块级元素或行内元素。例如：

nav a { display: block; }

可以将导航区的链接换行显示。

display 属性只是改变元素的显示方式，并没有真正改变元素的性质。

inline-block元素

行内块(inline-block)元素是块级元素与行内元素的混合，作为一个行内框与其它元素的内容相关。

行内块元素的底端默认位于文本行的基线上，而且内部没有行分隔符。

在行内块元素内部，会像块级元素一样设置内容的格式，它同样有属性 width 和 height 。
如果行内块元素的 width 未被定义或为 auto ，元素会收缩以适应其内容。行内块元素不能跨文本行显示。

下图展示了行内块元素的布局效果：

inline block元素布局示例

run-in元素

该值可以使某些块级元素成为下一个块级元素的行内部分。如果一个元素生成 run-in 框，而且该框后面是一个块级框，那么该 run-in 元素将成为块级元素框开始处的一个行内框。
该效果经常用于将标题作为文本段落的一部分出现。例如：

run-in的显示效果。注意开头的大号文本是标题（图片来源：css-tricks）

如果 run-in 元素后不是一个块级元素，该元素极有可能生成一个块级框。