CSS Display 双值语法

CSS的 display 属性是控制元素如何显示的核心属性。随着CSS规范的不断发展，display属性引入了更灵活的双值语法，让我们能够更精确地控制元素的布局行为。

双值语法

CSS Display Module Level 3 引入了双值语法，格式为：

display: [ <display-outside> || <display-inside> ] | <display-legacy>

<display-outside> = 
  block   |
  inline  |
  run-in  

<display-inside> = 
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby

<display-legacy> = 
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid

注:

• display: <display-inside> = display: block <display-inside>
• display: <display-outside> = display: <display-outside> flow
• display: inline-block = display: inline flow-root

外部显示类型 (<display-outside>)

外部显示类型定义了元素在父容器中的行为：

• block 块级元素
  • 元素会独自占据一行宽度并扩展至父容器的完整宽度。
  • 常见的块级元素如 <div>、<p>、<h1>
• inline 行内元素
  • 元素仅占据内容所需的空间，不开启新的行。
  • 常见的如 <span>、<a>、<em> 等。
• run-in 运行内元素，
  • 根据上下文决定是块级还是行内

内部显示类型 (<display-inside>)

内部显示类型定义了元素内部内容的布局方式：

• flow - 正常文档流布局（默认）
  • 元素按照通常的块级和行内模式排布。
  • 没有特别指定内部布局的元素，如 div 或 span，即包含块级和行内内容。
• flow-root - 创建新的块级格式化上下文（BFC），独立排版：
  • 包裹的内容不会受到外部的浮动或其他影响，而是作为独立流处理。
  • 常用于清除浮动的情境，如包含浮动元素的父元素。
• table - 表格布局
  • 元素及其子元素会按照表格的规则进行布局。
  • 如 <table> 元素及其子元素 <tr>、<td> 等。
• flex - 弹性布局
  • 内容会按照弹性盒模型进行排布，允许灵活上下左右排列子元素。
• grid - 网格布局
  • 允许创建二维网格布局，简化复杂的页面布局。
• ruby - 注音布局，专门用于排版东亚语言中的注音旁注
  • 常用于显示拼音或者注释文字，在主要文本旁边进行注音。
  • 主要适用于中文、日文、韩文的语言注释。