Skip to main content

标准流 Normal Flow

Docs

  • 标准流（Normal Flow）

    • 默认情况下，元素都是按照 normal flow（标准流、常规流、正常流、文档流【document flow】）进行排布
      • 从左到右、从上到下按顺序摆放好
      • 默认情况下，互相之间不存在层叠现象

  • margin-padding 位置调整

    • 在标准流中，可以使用 margin、padding 对元素进行定位
    • margin 还可以设置负数
    • 比较明显的缺点是
      • 设置一个元素的 margin 或者 padding，通常会影响到标准流中其他元素的定位效果
      • 不便于实现元素层叠的效果
    • 如果我们希望一个元素可以跳出标准流，单独的对某个元素进行定位呢？我们可以通过 position 属性来进行设置;

  • 一个块级元素的内容宽度是其父元素的 100%，其高度与其内容高度一致。内联元素的 height width 与内容一致。你无法设置内联元素的 height width --- 它们就那样置于块级元素的内容里。如果你想控制内联元素的尺寸，你需要为元素设置display: block; 或 display: inline-block; （inline-block 混合了 inline 和 block 的特性）。

  • 常规流中的任何一个盒子总是某个格式区域（formatting context）中的一部分。块级盒子是在块格式区域（block formatting context）中工作的盒子，而内联盒子是在内联格式区域（inline formatting context）中工作的盒子。任何一个盒子总是块级盒子或内联盒子中的一种。

  • "在一个块格式区域中，盒子会从包含块的顶部开始，按序垂直排列。同级盒子间的垂直距离会由"margin"属性决定。相邻两个块级盒子之间的垂直间距会遵循外边距折叠原则被折叠。

    在一个块格式区域中，每个盒子的左外边缘会与包含块左边缘重合（如果是从右到左的排版顺序，则盒子的右外边缘与包含块右边缘重合）。

  • "在内联格式区域中，盒子会从包含块的顶部开始，按序水平排列。只有水平外边距、边框和内边距会被保留。这些盒子可以以不同的方式在垂直方向上对齐：可以底部对齐或顶部对其，或者按文字底部进行对齐。我们把包含一串盒子的矩形区域称为一个线条框。（The rectangular area that contains the boxes that form a line is called a line box.）

  • 默认情况下，块级元素将占据这一内联方向的所有空间，因此我们的段落会铺开分布在多行，尽可能排满他的包含块。（By default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block.）如果限定了段落元素的宽度，第二个段落仍然会排布在第一个段落的下面——即使有足够空间使它们并排。每个块级元素都会从包含块的起始边开始，因此，在当前书写模式下，所有句子会从包含块的起始边开始。