行内格式化上下文
本指南解释了行内格式化上下文。
核心概念
行内格式化上下文是网页视觉渲染的一部分。行内盒模型一个接一个地排列，方向与当前书写模式中句子的运行方向一致。
- 在水平书写模式下，盒模型从左侧开始水平排列。
- 在垂直书写模式下，它们将从顶部开始垂直排列。
在下面的示例中，两个带有黑色边框的 <div> 元素是 块格式化上下文 的一部分，而在每个盒子内部，单词参与行内格式化上下文。水平书写模式中的单词水平运行，而垂直书写模式中的单词垂直运行。
<div class="example horizontal">One Two Three</div>
<div class="example vertical">Four Five Six</div>
body {
font: 1.2em sans-serif;
}
.example {
border: 5px solid black;
margin: 20px;
}
.horizontal {
writing-mode: horizontal-tb;
}
.vertical {
writing-mode: vertical-rl;
}
构成一行的盒模型由一个称为行盒的矩形区域包含。此盒子将足够大以容纳该行中的所有行内盒模型；当行内方向没有更多空间时，将创建另一行。因此，一个段落是一组行内行盒，在块方向上堆叠。
当行内盒模型被拆分时，边距、边框和内边距在拆分发生的位置没有视觉效果。在下一个示例中，有一个 <span> 元素包裹了一组换行到两行的单词。<span> 上的边框在换行点处断开。
<div class="example">
Before that night—
<span
>a memorable night, as it was to prove— hundreds of millions of people</span
>
had watched the rising smoke-wreaths of their fires without drawing any
special inspiration from the fact.
</div>
body {
font: 1.2em sans-serif;
}
.example {
border: 5px solid black;
margin: 20px;
}
span {
border: 5px solid rebeccapurple;
}
行内方向上的边距、边框和内边距都受到尊重。在下面的示例中，您可以看到行内 <span> 元素的边距、边框和内边距是如何添加的。
<div class="example horizontal">One <span>Two</span> Three</div>
<div class="example vertical">Four <span>Five</span> Six</div>
body {
font: 1.2em sans-serif;
}
.example {
border: 5px solid black;
margin: 20px;
}
span {
border: 5px solid rebeccapurple;
padding-inline-start: 20px;
padding-inline-end: 40px;
margin-inline-start: 30px;
margin-inline-end: 10px;
}
.horizontal {
writing-mode: horizontal-tb;
}
.vertical {
writing-mode: vertical-rl;
}
注意： 我使用的是逻辑的、流相对的属性 — padding-inline-start 而不是 padding-left — 这样它们就可以在文本是水平还是垂直的情况下在行内维度起作用。在 逻辑属性和值 中阅读有关这些属性的更多信息。
块方向上的对齐
行内盒模型可以使用 vertical-align 属性以不同的方式在块方向上对齐，该属性将在垂直书写模式下沿块轴对齐（因此根本不是垂直对齐！）。在下面的示例中，大文本使第一行的行盒更大，因此 vertical-align 属性可用于对齐其两侧的行内盒模型。我使用了 top 值，尝试将其更改为 middle、bottom 或 baseline。
<div class="example horizontal">
Before that night—<span>a memorable night</span>, as it was to prove—hundreds
of millions of people had watched the rising smoke-wreaths of their fires
without drawing any special inspiration from the fact.
</div>
<div class="example vertical">
Before that night—<span>a memorable night</span>, as it was to prove—hundreds
of millions of people had watched the rising smoke-wreaths of their fires
without drawing any special inspiration from the fact.
</div>
body {
font: 1.2em sans-serif;
}
span {
font-size: 200%;
vertical-align: top;
}
.example {
border: 5px solid black;
margin: 20px;
inline-size: 400px;
}
.horizontal {
writing-mode: horizontal-tb;
}
.vertical {
writing-mode: vertical-rl;
}
行内方向上的对齐
如果行内方向有额外的空间，可以使用 text-align 属性将行内盒模型在其行盒内对齐。尝试将下面的 text-align 值更改为 end。
<div class="example horizontal">One Two Three</div>
<div class="example vertical">Four Five Six</div>
.example {
text-align: center;
inline-size: 250px;
}
浮动的影响
行盒在行内方向通常具有相同的大小，因此在水平书写模式下具有相同的宽度，或在垂直书写模式下具有相同的高度。但是，如果同一个块格式化上下文中存在 float，则浮动将导致包裹浮动的行盒变短。
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
body {
font: 1.2em sans-serif;
}
.box {
background-color: rgb(224 206 247);
border: 5px solid rebeccapurple;
}
.float {
float: left;
width: 250px;
height: 150px;
background-color: white;
border: 1px solid black;
padding: 10px;
}