css可替换元素(replaced element)

梦里梦外; 2022-08-23 08:23 295阅读 0赞

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][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_codepen.io_GitKou_pen_LZpXrK]  
（本例来自于[http://oli.me.uk/2012/05/18/fun-with-negative-margins/][http_oli.me.uk_2012_05_18_fun-with-negative-margins]）

![这里写图片描述][20160612143733005]

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][https_www.zhihu.com_question_25402556_answer_30728140]  
> 来源：知乎  
> 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[http_openwares.net_internet_css_replaced_element.html]: http://openwares.net/internet/css_replaced_element.html
[http_codepen.io_GitKou_pen_LZpXrK]: http://codepen.io/GitKou/pen/LZpXrK
[http_oli.me.uk_2012_05_18_fun-with-negative-margins]: http://oli.me.uk/2012/05/18/fun-with-negative-margins/
[20160612143733005]: /images/20220721/361297de5ca346ecbacd3dff51f7d315.png
[https_www.zhihu.com_question_25402556_answer_30728140]: https://www.zhihu.com/question/25402556/answer/30728140