宽高均为0的空div是否会被纳入CSSOM与渲染树？

CSSOM 归属结论 #

• 这个div一定会被纳入CSSOM。
• CSSOM的构建和元素最终是否可见、尺寸多大没有关联：只要DOM节点能匹配到任意CSS规则（包括你写在内联style里的width: 0; height: 0;），浏览器就会解析对应规则，在CSSOM中生成该节点对应的CSS对象。
• 补充纠正：你参考里提到的「display: none元素不会纳入CSSOM」是错误认知。这类元素的display: none规则本身就需要被CSSOM解析存储，浏览器才能识别到它不需要参与后续渲染，因此它同样存在于CSSOM中。

渲染树（Render Tree）归属结论 #

• 这个div同样会被纳入渲染树。
• 渲染树只会排除两类节点，其余节点都会生成对应的渲染对象进入树结构：
  • 本身无渲染语义的非视觉节点，比如<head>、<script>、<meta>这类标签
  • 显式设置了display: none的节点，这类节点自身及其全部后代都不会参与渲染流程
• 0宽高的div不属于上述排除范围：它是具备渲染语义的普通块级元素，只是最终计算生成的盒模型尺寸为0，依然会完整参与布局计算流程，只是常规状态下不会绘制出可见内容、不占据常规流空间。
• 你给出的示例代码存在笔误，正确闭合的写法如下：

<div style="height:0; width: 0;"></div>

你可以直接在浏览器DevTools里验证：选中这个元素可以查到完整的计算后样式，在性能面板录制渲染流程时，也能查到它对应的布局、绘制记录，都能证明它存在于渲染树中。

核心差异对比 #

display: none的元素是在渲染流程的布局环节前就被完全过滤，不会生成渲染对象，完全不参与后续布局、绘制；而0宽高元素只是盒尺寸为0，会走完全部渲染流程——如果给它加border、outline、box-shadow或者偏移类transform属性，这些样式依然可以正常显示出来。

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