4.10 CSS 替换元素

替换元素和非替换元素

替换元素(Replaced element)是CSS2里面引入的术语,和CSS格式化模型范围有关。

替换元素

首先引用一下W3对此术语的定义:

An element whose content is outside the scope of the CSS formatting model, such as an image, embedded document, or applet. ...

所以替换元素其实就是指 img, input, textarea, select, object 等这类不需要依赖CSS格式化模型而带有内在尺寸的元素。

换个角度,我们还可以把替换元素理解为所有需要浏览器进行默认替换才能显示的元素。

例如浏览器会根据 <img> 标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容。又例如根据 <input> 标签的type属性来决定是显示输入框,还是单选按钮等。

(x)html中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容(是一个空元素),例如: <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" />

浏览器会根据元素的标签类型和属性来显示这些元素。替换元素也在其内容显示时生成了框。

我们不能在替换元素上使用伪元素选择器(:before 或 :after),因为这些元素的内容已经是一次动态替换后才产生的。

非替换元素

按字面来理解,所有不是替换元素的就是非替换元素。(x)html 的大多数元素是非替换元素,即其内容直接表现给用户代理(例如浏览器)。例如: <p/>段落的内容</p/> 段落 <img> 是一个不可替换元素,文本“段落的内容”全被显示。

前面的章节我们介绍了CSS的基础知识,如基本语法、选择器、继承、优先级、颜色大小等,接下来我们将详细讲解如何样式化一个文本