Normal Flow, Flow Layout, Block and Inline Layout的区别是什么?<



它们都是同义词吗?

使用这些术语的网站示例:

使用块布局规则的文档中最外层的元素建立第一个或初始块格式上下文。这意味着元素块中的每个元素都按照块和内联布局规则的正常流程进行布局。(来源:https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts block_formatting_contexts)

我不明白"使用块布局规则;部分。块布局的定义是什么?

元素使用流布局(块内嵌布局)布局其内容。(来源:https://www.w3.org/TR/css-display-3/flow-layout)

到底什么是流布局和块和内联布局?

正常流中的框属于格式化上下文,它可以是块或内联的,但不能同时存在。块级框参与块格式化上下文。行内级框参与行内格式化上下文。(来源:https://www.w3.org/TR/CSS2/visuren.html正常流动)

这里说的是它的行为,但没有说它到底是什么。

也许正常流=流布局= block-and-inline = block-layout = inline-layout?

Normal flow = flow layout = block-and-inline.

block-layout≠inline-layout

CSS2描述块布局:

在块格式上下文中,方框一个接一个地排列,垂直²,从包含块的顶部开始。

和内联布局:

在内联格式上下文中,框是水平布局的²,一个接一个,从包含块的顶部开始。

这里有很多细节,但这是布局的本质。

"正常流量"的目的提供了一个单独的布局术语,用于与浮动布局和定位布局以及其他独立格式上下文的内部内容进行对比。


¹几乎整个CSS 2.2规范的第9节到第16节都在描述这些细节。²"Vertically"one_answers";Horizontally"这里假设是水平书写模式。CSS 3引入了垂直书写模式,所有东西都旋转90°,所以"vertical "one_answers";horizontally"是相反的。