css可替换元素(replaced element)

MDN上

概述
CSS 里，可替换元素（replaced element）的展现不是由CSS来控制的。这些元素是一类 外观渲染独立于CSS的 外部对象。 典型的可替换元素有 <img>、 <object>、 <video> 和 表单元素，如<textarea>、 <input> 。 某些元素只在一些特殊情况下表现为可替换元素，例如 <audio> 和 <canvas> 。 通过 CSS content 属性来插入的对象 被称作 匿名可替换元素（anonymous replaced elements）。

CSS在某些情况下会对可替换元素做特殊处理，比如计算外边距和一些auto值。

需要注意的是，一部分（并非全部）可替换元素，本身具有尺寸和基线（baseline），会被像vertical-align之类的一些 CSS 属性用到。

以下来自： http://openwares.net/internet/css_replaced_element.html

替换元素

其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比如,img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。

CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

固有尺寸

宽度和高度是有元素自身定义的,不受周围元素的影响。CSS没有定义如何去寻找替换元素的固有尺寸。在CSS
2.1中,只有替换元素可以有固有的尺寸。对于没有可靠的解析度信息的光栅图像,必须假定一个图像源像素为一个px单位。

一些CSS属性比如vertical-align可能会用到替换元素的固有尺寸或基线。

非替换元素

替换元素之外的所有其他元素都是非替换元素,由CSS的视觉格式化模型负责非替换元素的渲染。

混乱的术语

看到有些文章中将这两种元素称作可替换元素和不可替换元素,这种叫法很明显是错误的。
首先，从w3c标准的原始定义中替换元素使用了Replaced而不是Replaceable。
其次,替换元素和非替换元素是已经被替换(CSS不负责其展示渲染,由其固有属性接管渲染)和不会被替换(由CSS负责展示渲染)，而不是可不可以被替换的概念。

References: [1]Replaced element [2]MDN:Replaced element

---

举一个诡异的例子：http://codepen.io/GitKou/pen/LZpXrK
（本例来自于http://oli.me.uk/2012/05/18/fun-with-negative-margins/）

1.这里小猫的img把下面的白色背景给覆盖了，原因是img的display是inline，它的stacking order在block box之上；
但是下面的文字p并没有被覆盖，因为文字p和img都是inline，遵循“后来居上”。
2.img强行设置成了display：block，然而并没有什么卵用，。。（不知。。我想这和img是replaced element有关）
3.同样，第二个例子的span，强行设置了display：block；起作用了；block的蓝色背景被覆盖，而文字没有被覆盖。

---

img是inline元素，但是他同时也是replace元素，他有着特殊的表现：
可以设置width/height;
默认的，img元素在屏幕占据的空间与其图片的实际像素一致，除非CSS有设置或者自身的width/height HTML 属性有设置
如果img标签的包裹元素为也为inline元素，则img的边界可以超出其直接父元素的边界，直到自己的宽、高达到最大或者设定值为止，而且文档流中img的兄弟元素也不能遮盖住img。最常见的就是<a>里面包含的<img>
所以从行为上看,img元素作为替换元素，有着类似于Inline-block的行为，尽管在SPEC里面，他的确是一个inline元素
Eric Meyer曾经很详细的解释过替换元素的概念，请参考他的CSS权威指南
作者：戴彬
链接：https://www.zhihu.com/question/25402556/answer/30728140
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。