1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
---
title: 行内格式化上下文（Inline formatting context）
slug: Web/CSS/Inline_formatting_context
translation_of: Web/CSS/Inline_formatting_context
---
<p>这篇文章将解释什么是行内格式化上下文（Inline formatting context）</p>
<h2 id="核心概念">核心概念</h2>
<p>行内格式化上下文是一个网页的渲染结果的一部分。其中，各行内框（inline boxes）一个接一个地排列，其排列顺序根据书写模式（writing-mode）的设置来决定：</p>
<ul>
<li>对于水平书写模式，各个框从左边开始水平地排列</li>
<li>对于垂直书写模式，各个框从顶部开始水平地排列</li>
</ul>
<p>在下面给出的例子中，带黑色边框的两个({{HTMLElement("div")}})元素组成了一个<a href="/zh-CN/docs/Web/Guide/CSS/Block_formatting_context">块级格式化上下文（block formatting context）</a>，其中的每一个单词都参与一个行内格式化上下文中。水平书写模式下的各个框水平地排列，垂直书写模式下的各个框垂直地排列。</p>
<p>{{EmbedGHLiveSample("css-examples/inline-formatting/inline.html", '100%', 720)}}</p>
<p>各个框组成了一行，而该行位于一个称为“行框（line box）”的矩形区域之中。该行框的大小将足以包含该行中所有的行内框（inline boxes）；如果一行的空间不够，将在行内方向上新开一行。因此，一个段落实际上是一系列行框的集合，这些行框在块的方向上排列。</p>
<p>一个行内框（inline box）被分割到多行中时， margins, borders, 以及 padding 的设定均不会在断裂处生效。 下例中有一个 ({{HTMLElement("span")}}) 元素，它包裹了一系列单词，占据了两行。可以看见在断裂处，<code><span></code> 的 border 同样发生了断裂。</p>
<p>{{EmbedGHLiveSample("css-examples/inline-formatting/break.html", '100%', 720)}}</p>
<p>Margins, borders, 以及 padding 的设置，在行的方向上是生效的。在下例中，可以看见行内元素 <code><span></code> 的 margin， border 以及 padding 是被加上了的。</p>
<p>{{EmbedGHLiveSample("css-examples/inline-formatting/mbp.html", '100%', 920)}}</p>
<div class="blockIndicator note">
<p><strong>注意</strong>: 此处使用了 logical, flow-relative properties — {{cssxref("padding-inline-start")}} ，而不是 {{cssxref("padding-left")}} — so that they work in the inline dimension whether the text is horizontal or vertical. Read more about these properties in <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Logical Properties and Values</a>.</p>
</div>
<h2 id="在块的方向上对齐">在块的方向上对齐</h2>
<p>行内框（Inline boxes）可使用{{cssxref("vertical-align")}}属性，以不同的方式在块的方向上进行对齐（因此在垂直书写模式下，<code>vertical-align</code> 中的“vertical”根本是名不副实——此时行内框将在水平方向上进行对齐）。 下例中， 字号较大的文本使得第一个句子的行框变大，因此 <code>vertical-align</code> 能让行内框（inline boxes）分布于上侧或下侧。例子里用的值是 <code>top</code>, 可以试试 <code>middle</code>, <code>bottom</code>, 或 <code>baseline</code> 这些值。</p>
<p>{{EmbedGHLiveSample("css-examples/inline-formatting/align.html", '100%', 920)}}</p>
<h2 id="在行内方向上对齐">在行内方向上对齐</h2>
<p>如果行内方向上还有额外空间，那么 {{cssxref("text-align")}} 可用于将各行内框（inline boxes）在行框（line box）内对齐。 可以试试把 <code>text-align</code> 的值改成 <code>end</code> 。</p>
<p>{{EmbedGHLiveSample("css-examples/inline-formatting/text-align.html", '100%', 920)}}</p>
<h2 id="浮动造成的效果">浮动造成的效果</h2>
<p>在行内方向上，各行框（Line Boxes ）通常具有相同的尺寸，即在水平书写模式下，它们有同样的宽度；在垂直书写模式下，它们有同样的高度。但是，如果同一个块格式化上下文中存在一个 {{cssxref("float")}}，则这个浮动元素将导致包裹了它的各行框变短。</p>
<p>{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}</p>
<h2 id="另见">另见</h2>
<ul>
<li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Block formatting context</a></li>
<li><a href="/en-US/docs/Web/CSS/Visual_formatting_model">Visual Formatting Model</a></li>
</ul>
|
