CSS中该display语法含义是什么？如何理解及W3C官方文档查询

你贴的这段是CSS display 属性的正式语法规则，用来定义这个属性可以接受的所有合法取值组合，下面拆解一下怎么理解：

先搞懂语法符号的含义 #

• ||：表示前后的选项可以任意顺序搭配，也可以只选其中一个
• []：把括号里的内容作为一个组合项看待
• |：表示互斥选择，只能从竖线分隔的选项里挑一组/一个

逐个解析每个可选部分 #

1. [ <display-outside> || <display-inside> ]
   这是最常用的组合：

   • <display-outside>：控制元素的外部显示类型，决定元素和周围元素的排列方式，可选值比如 block、inline、run-in
   • <display-inside>：控制元素内部的布局模式，决定子元素怎么排列，可选值比如 flow、flex、grid、table
     两者可以自由组合，比如inline-flex就是inline（外部）+flex（内部）的组合，也可以只写其中一个，比如单独写block就默认内部是flow布局。

2. <display-listitem>
   对应列表项的显示类型，比如list-item，它可以和上面的outside/inside组合使用，比如list-item block，用来生成带项目符号的列表元素。

3. <display-internal>
   这类是特定布局的内部专用类型，比如table-row、table-cell、grid-item，它们只能在对应的父布局容器（比如table、grid）下才能正常生效，用来构建复杂布局的内部结构。

4. <display-box>
   控制元素是否生成渲染盒子：

   • none：元素完全不显示，也不占据页面空间
   • contents：元素本身不生成盒子，它的子元素会直接继承父元素的布局上下文

5. <display-legacy>
   这是为了兼容旧版CSS保留的写法，比如inline-block、inline-table这些过去的单值写法，现在其实可以拆解成outside+inside的组合，但规范保留了这些值方便旧代码兼容。

关于W3C官方文档 #

这个语法来自CSS Display Module Level 3规范，里面详细定义了display属性的所有语法、取值和行为细节。

内容的提问来源于stack exchange，提问作者amusakbar