blob: 4338eb2f88d77b7550d05fd6bdb524cc6e7eba07 (
plain)
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
|
---
title: CSS 流式布局
slug: Web/CSS/CSS_Flow_Layout
translation_of: Web/CSS/CSS_Flow_Layout
---
<div>{{CSSRef}}</div>
<div>"文档流"或"流式布局"是在对布局进行任何更改之前，在页面上显示"块"和"内联"元素的方式。 这个"流"本质上是一系列的事物，它们都在你的布局中一起工作，并且互相了解。 一旦某部分脱离了"流"，它就会独立地工作。</div>
<div> </div>
<div>在文档流中，内联元素按内联方向显示，即词语在依据文件写作模式的句子中表示的方向。块元素则一个接一个地显示，就像该文档的写作模式中的段落一样。 因此在英语中，内联元素从左边开始一个接一个地显示，块元素从顶部开始向下显示并移动页面。</div>
<h2 id="示例">示例</h2>
<p>下面的示例演示块和内联级别框。两个带有绿色边框的段落元素是"块"级，其中一个在另一个下面显示。</p>
<p>第一个句子还包括一个带有蓝色背景的 span 元素。 这是行内级别，因此显示在句子的适当位置。</p>
<p>{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}</p>
<h2 id="参见">参见</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Block and Inline Layout in Normal Flow</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow">In Flow and Out of Flow</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Formatting_Contexts_Explained">Formatting Contexts Explained</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes">Flow Layout and Writing Modes</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow">Flow Layout and Overflow</a></li>
</ul>
<h2 id="参考">参考</h2>
<h3 id="Glossary_Entries">Glossary Entries</h3>
<ul>
<li>{{Glossary("Block/CSS", "Block (CSS)")}}</li>
</ul>
<section id="Quick_links">
<ol>
<li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li>
<li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li>
</ol>
</section>
|
