CSS规范中有一些章节提到"传播到视口&#34 ;;例如:calculating the height。
当溢出时,本节也适用于正常流程中的块级非替换元素。没有计算到可见的'但已传播到视口。
什么样的属性可以传播?它是否与子元素从其父元素继承属性的规则相矛盾?
答案 0 :(得分:7)
正如引用所述,overflow
property能够从body
传播到html
,从html
传播到视口:
UA必须将根元素上设置的'overflow'属性应用于视口。当根元素是HTML“HTML”元素或XHTML“html”元素,并且该元素具有HTML“BODY”元素或XHTML“body”元素作为子元素时,用户代理必须改为应用“溢出”属性从第一个这样的子元素到视口,如果根元素上的值是“可见的”。用于视口时的“可见”值必须解释为“自动”。传播值的元素必须具有'visible'的'溢出'的使用值。
可以这种方式传播的另一个属性是background
:
由于没有元素对应于画布,为了允许画布的样式,CSS传播根元素的背景(或者,在HTML的情况下,传播< body>元素),如下所述。
3.11.1。画布背景和根元素
根元素的背景成为画布的背景,其背景绘画区域扩展到覆盖整个画布。但是,任何图像的大小和位置都相对于根元素,就像它们仅为该元素绘制一样。 (换句话说,背景定位区域是根元素确定的。)根元素不会再次绘制此背景,即其背景的使用值是透明的。
3.11.2。画布背景和HTML< body>元件
对于其根元素为HTML
HTML
元素[HTML401]或XHTMLhtml
元素[XHTML11]的文档:如果根元素上的'background-image'的计算值为'none '及其'background-color'是'透明',用户代理必须从该元素的第一个HTMLBODY
或XHTMLbody
子元素传播背景属性的计算值。BODY
元素的背景属性的使用值是它们的初始值,传播的值被视为在根元素上指定它们。建议HTML文档的作者指定BODY
元素的画布背景而不是HTML
元素。
此传播行为是出于历史原因(<body background="..." bgcolor="...">
)指定的,也是为了使作者能够设置整个页面背景的样式,这通常不能仅通过html
或{{1}来完成}元素没有先删除它们的默认边距和forcing them to fill the page。
surprised,results可能comparing the behavior with other elements可能interesting workarounds for browser bugs dating back over 15 years https://jsfiddle.net/nt0vhtmg/20/ {}} {}} {}> {} 。另一方面,作者也利用这种行为来创建{{3}}。
此行为与继承不冲突,因为它的工作方向相反。继承将属性值从父元素“传播”到子元素;此行为将属性值从子框传播到父框(body
到body
,并html
分别传播到视口。“