替换元素和非替换元素

从浏览器显示元素的方式看,css将元素分为替换元素(replaced element)和非替换元素(non-replaced element)两类。

替换元素是指内容是定义在文档外部的,独立于css,浏览器根据元素类型和属性决定显示内容。替换元素包括<img>, <object>, <video>, <textzrea>, <input>。<audio>和<canvas>既可以是替换元素也可以是非替换元素,而通过content属性(例如:before, :after 实现的伪类元素)实现的元素属于匿名替换元素。

非替换元素是指内容定义在文档中,浏览器直接显示这些内容,大部分元素都是非替换的。例如<p>this is content to display</p>会直接显示这段文字。

值得一提的是,css没有制定替换元素的:before和:after实现,也就意味着:before, :after对替换元素不起作用

https://www.w3.org/TR/CSS2/conform.html#replaced-element
https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element
https://www.w3.org/TR/CSS2/generate.html#before-after-content

替换元素和非替换元素