确定渲染树中的元素

【问题标题】：Determining elements in the Render Tree确定渲染树中的元素
【发布时间】：2020-06-03 13:31:48
【问题描述】：

在网络浏览器的上下文中，Render Tree 仅包含网页上可见的元素。所以带有display: none 的元素不会进入渲染树。但我知道像height: 0 和position : absolute; left: 100% 这样的元素包含在渲染树中，即使它们在渲染时不会在网页上可见。那么为什么这些元素仍然包含在渲染树中呢？

【问题讨论】：

标签： javascript html css google-chrome browser

【解决方案1】：

因为它们可能仍然拥有可见的子节点：

.no-height {
  height: 0;
};
.absolute {
  position: absolute;
}

<div class="no-height">
  <p class="absolute">still here</p>
</div>

因为它们仍然可以有可见的边框或边距

.no-height {
  height: 0;
  border: 5px solid;
  margin: 120px;
};

<div class="no-height">
</div>
I should be at top

因为它们可能会对其他可见节点产生一些影响：

.no-height {
  height: 0;
};

<div>
  some inline<div class="no-height"></div>text
</div>

【讨论】：