CSS绘制顺序算法疑问：块级元素文本为何被行内元素边框遮挡？

你之前梳理的绘制顺序存在核心错误：错误地将所有块级元素的背景边框批量绘制完成后，再处理行内元素，最后统一绘制所有文本。但根据W3C的绘制顺序算法，在没有创建堆叠上下文的正常文档流中，绘制是按元素在文档流中的出现顺序逐个处理，每个元素的内部绘制遵循“背景边框 → 内容”的顺序。

针对你的代码，正确的绘制顺序应该是：

• 绘制.container的绿色边框
• 绘制第一个.inside块的背景（aquamarine）与黑色边框
• 绘制第一个.inside块的文本内容「First Block Div」
• 绘制span的fuchsia边框（无背景）
• 绘制span的文本内容「Inline Span」
• 绘制第二个.inside块的背景与黑色边框
• 绘制第二个.inside块的文本内容「Second Block Div」

这样一来，span的边框是在第一个.inside的文本之后绘制的，自然会覆盖住下方的文本，这和你看到的实际渲染效果完全一致。

核心逻辑是：块级元素的内容（文本）会在自身的背景边框绘制完成后立即绘制，而非等到所有块级元素的背景边框都处理完再统一绘制。行内元素则按照文档流中的位置，紧跟在前面的块级元素内容之后，依次绘制自身的边框、背景和文本。

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