为何为*选择器设置display:flex会触发CSS渲染？代码片段为何显示为文本？

• * 是全局选择器，会匹配页面所有HTML元素，包括<html>和<body>根元素。
• 默认状态下，<html>和<body>的高度为auto，若页面无内容，它们的高度会收缩至0，浏览器几乎无需额外渲染。但设置display:flex后，这两个元素变为flex容器，flex布局的特性会让它们自动拉伸填充视口可用空间，浏览器需要计算布局并渲染该容器的占位。
• 同时，color:blue规则会应用到所有元素，即便页面无可见内容，浏览器也会解析并应用这条样式规则，进一步触发渲染流程。

• 代码里的CSS内容被包裹在<pre>和<code>标签中，这两个标签的作用是展示代码文本，而非让浏览器解析执行CSS样式。
• 浏览器能识别并执行的CSS需要放在<style>标签内，或通过外部样式表引入。当前代码未将CSS放在正确的样式声明区域，因此浏览器会把这些代码当作普通页面内容直接显示。

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