CSS中的盒子定位

CSS核心布局是将一组HTML元素映射到一组矩形框，这些矩形框可以位于x轴，y轴和z轴上。

这些盒子的x轴和y轴定位由应用于盒子的定位方案确定。在本章中，我将介绍CSS 2.1中引入的定位方案：正常流，浮动和绝对定位。

从概念上讲，CSS布局的最高级抽象是定位方案。一旦确定了定位方案，就可以通过特定的布局模式进一步修改它，例如display: table或display: inline-table。即使是引入布局模式（如flexbox和grid）的CSS 3扩展，仍然存在于一个主要的定位方案中（例如display: flexvs. display: inline-flex）。

定位方案

CSS 2.1定义了三种定位方案，它们是：

• 正常流，由三个格式化上下文组成：块，内联和相对格式化上下文
• 浮动，以自己的方式与正常流相互作用，并形成大多数现代CSS网格框架的基础
• 绝对定位，它处理相对于正常流动的绝对和固定元素

定位方案对元素的x轴和y轴定位有很大影响。CSS 2.1规范的9.3节描述了这三个属性之间的交互，但是短版本是默认属于正常流的所有元素，除非它们是从正常流中专门删除的 - 通常是通过设置float属性或position属性。

属性	默认值	目的
display	block 或 inline	确定要使用的布局算法
position	static	控制元素的位置
float	none	允许其他元素在元素周围浮动

通过它们如何与正常流动相互作用，为了可以最好地理解浮动和绝对定位，因此我将首先介绍正常流动定位方案。

如果你考虑一下，实际上有两个方面的布局:

• 元素的框的大小和对齐方式，主要由display属性(以及width, height和margin)控制。
• 特定父元素中的元素是如何相对定位的

在本章中，我将重点关注后一方面 - 相对定位。下一章将介绍盒子模型，它决定了对齐和尺寸。

父元素中元素的相对位置由为特定父元素的所有直接子元素建立的格式化上下文控制，在正常流中，格式化上下文可以是块或内联格式化上下文。

下面是CSS 2.1规范关于格式化上下文的说明:

普通流中的框属于格式化上下文，可以是块或内联的，但不能同时属于这两种格式。
块级框参与块格式化上下文。
内联级框参与内联格式化上下文。
normal-flow

父(容器)根据子框是内联级的还是块级的，为其子框建立格式化上下文。
定义术语内联级和块级是为了突出显示具有display属性而不是inline或block的块仍然映射到普通流中的两个格式化上下文之一。
例如，display: table元素被认为是块级的，display: inline-table元素被认为是内联级的

块级元素定义为:

块级元素是源文档中以块(例如段落)的形式可视化格式化的元素。“display”属性的下列值构成元素块级:’block’, ‘list-item’和’table’。

块级框是参与块格式化上下文的框。每个块级元素生成一个主块级框，该框包含子代框和生成的内容，也是任何定位方案中涉及的框。
一些块级元素可能会在主框之外生成额外的框[例如]:list-item元素。这些额外的框是相对于主框放置的。

几乎所有块级别的盒也是块容器盒。块容器框只是一组其他框的父框，具有特定的格式化上下文:

除了table boxes […]而被替换的元素，块级框也是块容器框。块容器框要么只包含块级框，要么建立内联格式化上下文，因此只包含内联级框

内联级元素定义为:

内联级元素是源文档中不形成新的内容块的元素;内容按行分布(例如，段落中强调的文本片段、内联图像等)。
display属性的下列值构成元素的内联级:inline、inline-table和inline-block。
内联级元素生成内联级框，这些框参与内联格式化上下文。

内联框是内联级别的，其内容参与其包含的内联格式化上下文。一个display值为inline的未替换元素生成一个内联框。
不是内联框的内联级框(如替换的内联级元素、内联块元素和内联表元素)称为原子内联级框，因为它们以单个不透明框的形式参与内联格式化上下文

我不会真正讨论被替换和未被替换的元素，因为这是一个相当小的区别。考虑替换元素的最简单方法是考虑img或video元素——也就是说，元素只有一个(外部定义的)内容，不能像文本内容那样分成行。

您可以大致考虑一下常规流中的两个格式化上下文，分别对应于垂直堆栈(在块格式化上下文中)和水平堆栈(在内联格式化上下文中)。我一会儿会讲到这两个问题。

上述定义的有趣之处在于，每个框的格式化上下文必须是“内联格式化上下文”或“块格式化上下文”。也就是说，对于每个父元素，所有子元素都使用一种格式化上下文进行布局。当您可以清楚地混合块级内容(如div)和内联级内容(如文本)时，如何做到这一点呢?答案是，有一种机制可以将内联级元素提升为块级元素。这种机制称为匿名盒子生成。

匿名盒子生成

匿名盒子生成用于处理情况下一个父元素包含inline-level和块级子元素(在这种情况下,“匿名块盒”生成)和标记的情况下包含inline-level元素与周围文本混合(在这种情况下,“匿名内联盒子”生成),如一个em或我标记在一段文本。

匿名块盒子

规范给出了一个匿名块盒子生成的例子:

<div>
    Some text
    <p>More text
</p></div>

如果一个块容器盒子(比如上面为DIV生成的那个)内部有一个块级别的盒子(比如上面的P)，那么我们强制它只包含块级别的盒子。

例如，规范提供了以下示例代码是如何导致包装内联级内容的匿名框的:

当内联盒子包含一个子块级盒子,内联盒子(及其内联的祖先在同一个盒子行)被打破的块级盒子(和任何块级的兄弟姐妹连续或隔着可折叠的空白和/或out-of-flow元素),把内联盒子分成两个盒子(即使是空的两侧),一人一边的块级盒子(es)。断点之前和断点之后的行框被封装在匿名块框中，块级框成为这些匿名框的兄弟框。当这样的内联框受到相对位置的影响时，任何结果转换也会影响内联框中包含的块级框。