Css规范整理：3.1、常规流布局：核心思想

常规流布局

核心思想

（Css2.1标准中没有 明确提出，在最新的 CSS Display Module Level 3 中提出了，虽然是草案，但其中的思想与前者一脉相承）

display属性定义了一个元素的显示类型，它包含元素如何生成盒的两个基本特征：

• 外部显示类型 outer display type

  它决定了盒子本身如何参与流（flow）式布局

  • block : 在流布局中时，该元素将生成一个块级盒（block-level box)
  • inline : 在流布局中时，该元素将生成一个行内级盒（inline-level box)

• 内部显示类型 inner display type

  它定义（如果它是一个<u>非替换元素</u>）生成的格式化上下文的类型，指示如何布局它的后代。 （<u>替换元素</u>的内部显示不在CSS范围内）即指定元素的内部显示类型，定义其内容的格式上下文的类型。

  • flow

    元素内部使用流式布局

    • 如果 外部显示类型是 inline 且该元素参与到块格式化上下文或者行内格式化上下文，则该元素生成行内盒（ inline box ）

      display:inline = display:inline flow
      

    • 否则，它会生成一个块容器盒（ block container box ）

      display:block = display:block flow
      

    • 根据其他属性的值（例如position，float或overflow）以及它本身是否参与块或行内格式化上下文，它要么为其内容建立新的块格式化上下文，要么将其内容整合到其父格式化上下文。

  • flow-root

    该元生成一个块容器盒（ block container box ），并使用流布局来布局其内容。它总是为其内容建立一个新的块格式上下文。

    display:inline-block = display:inline flow-root
    

  • table

    该元素生成一个主表格包装盒（table container box），它建立一个块格式化上下文，并包含一个额外生成的表格框，用于建立一个表格格式化上下文。

    display:table = display:block table;
    display:inline-table = display:inline table;
    

  • flex（Css3）

    该元素生成一个主flex包装盒（flex container box），它建立一个flex格式化上下文。

    display:flex = display:block flex;
    display:inline-flex = display:inline flex;
    

  • grid（Css3）

    该元素生成一个主grid包装盒（flex container box），它建立一个grid格式化上下文。

    display:grid = display:block grid;
    display:inline-grid = display:inline grid;
    

关键概念：

包含块

Css中很多盒的位置和大小都是根据其包含块的矩形框进行计算。一般把生成的盒作为后代盒的包含块。

下一章：常规流布局：块格式化上下文

转载于:https://my.oschina.net/reamd7/blog/1620907