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

时间:2012-09-17 22:55:12

标签: html css

在阅读CSS2 specification高度属性时遇到以下情况:

  

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

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

3 个答案:

答案 0 :(得分:39)

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

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

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

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

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

答案 1 :(得分:24)

David Baron discusses this on his website here

  

有两种类型的内联元素:替换内联元素和   未替换的内联元素。通常,未替换的元素是   那些内容包含在文件中的人,而   被替换元素是那些内容在文档之外的元素。   例如,在代码中:

     

访问<a href="http://www.w3.org/">World Wide Web Consortium</a>   要了解... a元素的内容是&#34;万维网   财团&#34 ;.替换元素是内容来自的元素   一些外部来源,例如,objectimg元素。

     

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

未替换内联元素的良好示例包括spanstrongibem等。

答案 2 :(得分:15)

您可以在索引中找到a replaced element的定义:

  

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

     

用户代理可能会认为替换元素没有任何内在元素   尺寸,如果认为这些尺寸可能泄漏   敏感信息给第三方。例如,如果是HTML   文件根据用户的银行余额改变了内在规模,   然后,UA可能希望表现得该资源没有内在性   尺寸。

     

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

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