HTML元素在解析与渲染流程中何时被分配盒模型？是否在CSSOM构建阶段？

好问题！很多人会把CSSOM构建和盒模型分配的阶段搞混，我来给你掰扯清楚：

首先明确：盒模型的实际分配（也就是计算具体的几何尺寸和位置）并不是在CSSOM构建阶段，而是在浏览器渲染流程的布局（Layout/Reflow）阶段。下面一步步拆解：

• CSSOM构建阶段：这一步浏览器只是把所有CSS规则（包括浏览器自带的默认用户代理样式，比如<body>的默认margin、<p>的上下边距）解析成结构化的样式对象树。说白了，这时候只是把样式规则整理好，还没把规则和具体的DOM元素绑定，更不会计算实际的盒模型像素尺寸。

• 渲染树构建阶段：浏览器会把DOM树和CSSOM树合并，生成渲染树。这一步会过滤掉不可见元素（比如display: none的元素），同时为每个可见元素计算computed style——也就是把所有适用的样式规则（包括默认样式）合并后的最终样式值。比如这时候你能得到margin: 16px（把1em转换成了实际像素）或者width: auto，但这只是样式的计算值，还没确定元素在页面中到底占多大空间、位置在哪。

• 布局（Layout）阶段：这才是盒模型真正被分配的阶段。浏览器会从根节点（<html>）开始遍历整个渲染树，结合视口尺寸、父元素的盒模型信息，把每个元素的computed style转换成具体的几何属性：包括content区域的宽高、padding/border/margin的精确像素值，以及元素在页面中的x、y坐标位置。到这一步，元素的盒模型才真正落地。

举个简单例子：浏览器默认给<body>加了margin: 8px，在CSSOM阶段只是存了这个规则，渲染树阶段确定<body>元素要应用这个规则，而布局阶段才会计算出这个8px的margin到底在页面上占据多大空间，以及<body>的内容区域应该从哪里开始。

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