gpt4 book ai didi

css - CSSOM(CSS Object Model)的根元素是如何确定的

转载 作者:行者123 更新时间:2023-12-04 10:44:23 25 4
gpt4 key购买 nike

我一直在研究浏览器渲染,我刚刚进入渲染过程中浏览器从原始 CSS 构建 CSSOM 的部分。

在我见过的所有教程中,作者似乎都假设/断言 body element 是根,并且所有应用于主体的样式都将默认应用于 DOM 的其余部分,除非被另一个选择器显式覆盖。一个例子在这里 https://blog.logrocket.com/how-css-works-parsing-painting-css-in-the-critical-rendering-path-b3ee290762d3/

和这里 https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model

在这两种解释中 - body标签被假定为根,即使 html标签似乎应该是根。更重要的是,HTML 规范似乎不需要标记中的这些标签中的任何一个(尽管我可能误解了这一点)。

对我来说,在将样式应用于渲染树中的元素时,这似乎是一条非常重要的信息。如果不知道哪个元素是根元素,那么就不知道样式应该如何相互级联。

所以我的问题本质上是,浏览器是否总是假设 body 元素是根元素,或者是否有一种方法可以确定哪个元素应该是浏览器 CSS 树中的根元素?

最佳答案

这里有几个问题您正在混淆,因此即使您自己提出的每个问题之前都已被问过并回答过,也很难将其作为重复来关闭。所以我希望这会有所帮助!

How is the root element of the CSSOM (CSS Object Model) determined



根只是文档的根元素,或 html ,让大家不要误会。

authors seem to make the assumption that the body element is the root (..) An example of this is here https://blog.logrocket.com/how-css-works-parsing-painting-css-in-the-critical-rendering-path-b3ee290762d3/



嗯,没有。该页面上的示例使用“root”作为它所讨论的特定子树的顶部,恰好是 <body>有,但那是巧合;这个例子很可能是一个表,然后是 <table>本来是“根”。

Whats more is the fact that the HTML specification doesn't seem to require EITHER of these tags in markup (maybe I'm misunderstanding this though).


<html> 的开始标签和 <body>是可选的,所以是的,它们可以从 HTML 文档中省略。与 <head> 相同.但元素本身仍然存在!所有内容都在 html里面元素,开始标签与否。您可以通过加载 HTML 文档来自行测试,例如

<title>title</title>
<div>Hello world</div>

进入浏览器并检查它,你会看到 div 现在被打包在一个 body 中。元素,而标题在 head 中元素。没有办法解决这个问题。

现在令人困惑的部分是一些(但不是全部)CSS 样式应用于 body适用于 html而是通过浏览器。 background-color例如;如果将其分配给正文,则整个浏览器窗口都会被着色,而不仅仅是正文区域。
这是很久以前的遗留行为,当时 html element 不被认为是绘图 Canvas ;它没有样式,只有主体具有样式属性(BGCOLOR、TEXT、LINK 等)。尽管情况不再如此,但出于兼容性目的,浏览器仍会表现得好像它是一样的。

关于css - CSSOM(CSS Object Model)的根元素是如何确定的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59774994/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com