为何Flex布局中display:initial的子元素表现为block而非默认inline？

首先纠正一个常见误解：display:initial并不是取:root元素的默认值，也不是元素自身的浏览器默认样式（比如p标签默认的block），而是取该CSS属性的全局初始值——display属性的全局初始值是inline。

那为什么会出现两种不同的表现？核心在于flex/grid容器对其子元素的特殊处理规则：

1. 无flex/grid父元素的情况 #

当p标签没有flex/grid父容器时，设置display:initial就是直接应用display属性的全局初始值inline，所以p标签会表现为inline元素。

2. 有flex/grid父元素的情况 #

当父元素设置为display:flex或display:grid后，它的子元素会成为flex item或grid item。CSS规范对这类容器的子元素有特殊的display计算规则：

• 只要子元素的display原始值是inline、inline-block、inline-table、表格相关的display值（比如table-cell）等，浏览器会强制将其计算值转换为block。

而display:initial给p标签设置的原始值是inline，作为flex item，这个值会被浏览器转换为block，所以最终表现为block元素。

验证代码示例 #

<div class="parent">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, maxime?</p>
</div>

/* 父元素为flex容器，p标签表现为block */
.parent { display: flex; }
p { display: initial; }

/* 无flex容器，p标签表现为inline */
/* .parent { display: block; } */
p { display: initial; }

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