什么是未替换的内联元素？

Question

在阅读CSS2规范的height属性时遇到以下内容:

适用于:所有元素,但未替换的内联元素,表列和列组

我理解替换了element(<img>)或内联元素(<button>,<a>)是什么,但无法找到未替换的内联元素的示例.

Answer 1

表达式"未替换的内联元素"没有自己的定义:它只是指任何既是非替换元素又是内联元素的元素.如<a>.HTML中的大多数元素都是未替换的.未替换的元素只是一个不是替换元素的元素.

但是,在CSS规范中,只有概念"替换元素"的一般特征,而不是任何这些元素的确定列表.这是可以理解的,因为HTML的发展相当独立于CSS.

这个概念随着时间的推移有所改变.的CSS 1规格说:"在HTML中,IMG,INPUT,TEXTAREA,SELECT,和对象元素可以被替换元件的例子."在较新的规格,表单字段中不包含任何更多.这反映在HTML5草案中,其中" 渲染"部分明确列出了非替换元素下的表单控件.根据它,唯一被替换的元素是那些将外部内容(例如图像,视频,小程序或HTML5画布)嵌入到HTML文档中的menu元素- 除了改进的元素也被提及(预计将在与浏览器控件相呼应的方式,因此它也可以嵌入外部内容.

此更改反映了浏览器开发.早期的浏览器使用系统例程以一种对CSS中的任何东西免疫的方式实现表单字段,并且仍然存在一些这样的方法,但是现在表单字段大多可以使用CSS格式化,因此它们已经有效地从替换为非替换元素.

对于大多数实际用途,最好将"替换"视为"嵌入".所以"非替换元素"只是一个被渲染的元素,而不是让一些外部内容出现在它的位置.

Answer 2

David Baron 在他的网站上讨论了这个问题.

内联元素有两种类型:替换内联元素和非替换内联元素.通常,未替换元素是其内容包含在文档中的元素,而替换元素是其内容在文档外部的元素.例如,在代码中:

访问<a href="http://www.w3.org/">World Wide Web Consortium</a> 以了解... a元素的内容是"万维网联盟".替换元素是那些其中的内容来自一些外部源,例如,一个object或img元件.

然而,就内联盒模型而言,定义如上所述,除了具有显示类型的元素 inline-table和inline-block(后者是用于容纳表单元素的CSS3的建议类型)被认为是替换元素.

非替换行内元素的良好的例子是span,strong,i,b,em,等.

Answer 3

您可以在索引中找到替换元素的定义:

内容超出CSS格式模型范围的元素,例如图像,嵌入文档或小程序.例如,HTML IMG元素的内容通常被其"src"属性指定的图像替换.替换元素通常具有固有的尺寸:固有宽度,固有高度和固有比率.例如,位图图像具有以绝对单位指定的固有宽度和固有高度(显然可以从中确定固有比率).另一方面,其他文档可能没有任何内在维度(例如,空白HTML文档).

如果认为这些维度可能会将敏感信息泄露给第三方,则用户代理可以认为替换元素不具有任何内在维度.例如,如果HTML文档根据用户的银行余额更改了内在大小,则UA可能希望表现为该资源没有内在维度.

CSS渲染模型中不考虑替换元素的内容.

未替换的内联元素是内联的,不符合上述要求.粗略地说,它是一个包含(或可以包含)文本的元素,可以正常设置样式.(a,b,cite,def,em,等等)