display:run-in; 是一个非常有趣的属性,虽然作为普通流里的一个环节,但却很少有人问津。Chris Coyier 曾经写过一篇 CSS Run-in Display Value,简述了这个属性的作用。除此以外,它几乎不被人所讨论。
对于其定义,大致上就是下面这三点:
- If the run-in box contains a block box, the run-in box becomes a block box.
- If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.
- Otherwise, the run-in box becomes a block box.
翻译成中文就是下面的意思:
- 如果 run-in box 包含 block box,那么这个 run-in box 也成为 block box
- 如果紧跟在 run-in box 之后的兄弟节点是 block box,那么这个 run-in box 就会做为此 block box 里的 inline box,run-in box 不能进入已经一个已经以 run-in box 开头的块内,也不能进入本身就是
display:run-in;的块内 - 否则,run-in box 成为 block box
可见 display:run-in; 会根据上下文环境变换表现形式:如果后面是一个块,那么就并入其中成为行内头。如果后面是行,则继续独立保持成块。
对于这个属性,也许我们不禁要问,它有什么用?比如,我们完全可以用 float、inline-block 甚至是 inline 替代从而达到类似的视觉效果。然而,典型应用里,h1 - h6无法包含在 p 里,我们既要达到语义又要达到这样的视觉效果的话,唯有使用 display:run-in;。float 毕竟无法让标题inline在整个段落的开头,文字的大小会影响换行和布局。而 inline-block 以及 inline 则不符合语义。
