行內格式化上下文
本指南解釋了行內格式化上下文。
核心概念
行內格式化上下文是網頁視覺渲染的一部分。行內盒模型一個接一個地排列，方向與當前書寫模式中句子的執行方向一致。
- 在水平書寫模式下，盒模型從左側開始水平排列。
- 在垂直書寫模式下，它們將從頂部開始垂直排列。
在下面的示例中，兩個帶有黑色邊框的 <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;
}