“传播到视口"是什么意思?在CSS规范中? [英] What's the meaning of "propagated to the viewport" in the CSS spec?
问题描述
CSS规范中有一些章节提到传播到视口"；例如:计算高度
当溢出"不计算为可见"但已传播到视口时，本节也适用于正常流程中的块级不可替换元素.
什么样的属性可以传播?并与子元素从其父元素继承属性的规则相矛盾吗?
如引用所述，
可以以这种方式传播的另一个属性是 由于没有元素与画布相对应，因此，为了允许对画布进行样式设置，CSS会传播根元素(或在HTML中为< body>元素)的背景，如下所述.
根元素的背景成为画布的背景，并且其背景绘画区域扩展为覆盖整个画布.但是，任何图像的大小和位置都相对于根元素，就好像它们是为该元素单独绘制的一样. (换句话说，背景定位区域是针对根元素确定的.)根元素不会再次绘制此背景，即其背景的使用值是透明的. 对于其根元素是HTML 这种传播行为是出于历史原因( 不知道这种行为的尝试将这两个属性应用于 There are some chapters in the CSS spec mentioning "propagated to the viewport"; for example: calculating the height. This section also applies to block-level non-replaced elements in normal flow when 'overflow' does not compute to 'visible' but has been propagated to the viewport. What kind of attribute can propagate? And does it contradict with the rule in which a child element inherits an attribute from its parent? As the quote states, the UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'. The other property that can be propagated in this manner is Since no element corresponds to the canvas, in order to allow styling of the canvas CSS propagates the background of the root element (or, in the case of HTML, the <body> element) as described below.
The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas. However, any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) The root element does not paint this background again, i.e., the used value of its background is transparent. For documents whose root element is an HTML This propagating behavior is specified for historical reasons ( Authors not aware of this behavior who try to apply these two properties to This behavior does not conflict with inheritance because it works in the opposite direction. Inheritance "propagates" property values from a parent element to a child element; this behavior propagates property values from a child box to a parent box ( 这篇关于“传播到视口"是什么意思?在CSS规范中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！background :
3.11.1.画布背景和根元素
3.11.2.画布背景和HTML< body>元素
HTML元素[HTML401]或XHTML html元素[XHTML11]的文档:如果根元素上的'background-image'的计算值为'none'并且其' background-color"是透明的"，用户代理必须改为从该元素的第一个HTML BODY或XHTML body子元素传播背景属性的计算值.该BODY元素的背景属性的使用值是它们的初始值，并且将传播的值当作在根元素上指定的那样对待.建议HTML文档的作者为BODY元素而不是HTML元素指定画布背景.<body background="..." bgcolor="...">)以及使作者能够设置整个页面背景的样式而指定的，这通常不能仅通过html或body元素来完成，而无需首先删除其样式默认边距和强制其使用填写页面.body和html的作者可能是，尤其是当将行为与其他行为进行比较时元素.另一方面，作者还利用这种行为来创建body到html，并且将html传播到视口).
overflow property is capable of being propagated from body to html, and from html to the viewport:
background:
3.11.1. The Canvas Background and the Root Element
3.11.2. The Canvas Background and the HTML <body> Element
HTML element [HTML401] or an XHTML html element [XHTML11]: if the computed value of ‘background-image’ on the root element is ‘none’ and its ‘background-color’ is ‘transparent’, user agents must instead propagate the computed values of the background properties from that element's first HTML BODY or XHTML body child element. The used values of that BODY element's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.<body background="..." bgcolor="...">) as well as to enable authors to style the entire page background, something that cannot normally be done solely through the html or body elements without first removing their default margins and forcing them to fill the page.body and html may be surprised by the results, especially when comparing the behavior with other elements. On the other hand, authors have also exploited this behavior to create interesting workarounds for browser bugs dating back over 15 years.body to html, and html to the viewport respectively).
