可替换元素replaced element
也称作可置换元素,其展现效果不是由CSS
来控制的,这些元素是一种外部对象,它们外观的渲染,是独立于CSS
的。非置换元素non-replaced element
也称作非替换元素,其内容由CSS
渲染直接表现给客户端。
一个内容不受CSS
渲染控制,CSS
渲染模型并不考虑对此内容的渲染,且元素本身一般拥有固有尺寸例如宽度、高度、宽高比等的元素,被称之为置换元素。对于可替换元素,浏览器会根据元素的标签和属性,来决定元素的具体显示内容。
可替换元素的内容不受当前文档的样式的影响,CSS
可以影响可替换元素的位置,但不会影响到可替换元素自身的内容。对于某些可替换元素,例如<iframe>
元素,可能具有自己的样式表,但它们不会继承父文档的样式。
CSS
能对可替换元素产生的唯一影响在于,部分属性支持控制元素内容在其框中的位置或定位方式。CSS
在某些情况下会对可替换元素做一些特殊处理,比如计算外边距margin
和一些auto
的具体值。一部分可替换元素,其本身具有的尺寸和基线baseline
会被一些CSS
属性用到,加入计算之中,例如vertical-align
,只有可替换元素才能具有这种自带值。
例如浏览器会根据<img>
标签的src
属性的值来读取图片信息并显示出来,图片的内容由src
决定,CSS
并不考虑对图片的内容进行渲染。又例如根据<input>
标签的type
属性来决定是显示输入框,还是单选按钮等。
常见的可替换元素,例如<iframe>
、<video>
、<embed>
、<img>
等,有些元素在特定情况下会被当作可替换元素处理,例如<option>
、<audio>
、<canvas>
、<object>
、<applet>
、<input>
等。
非替换元素是其内容包含在文档中的元素,其内容可以受CSS
渲染控制。
非替换元素的内容不会超出CSS
的模型范围,CSS
在渲染时会考虑非替换元素的内容。
HTML
的大多数元素是不可替换元素,即其内容直接表现给浏览器,例如<div>
、<p>
、<h1>~<h6>
、<table>
等等等等。