替换元素

什么是替换元素？

通过修改某个属性值呈现的内容就可以被替换的元素就称为"替换元素"。因此，<img>、<object>、<video>、<iframe> 或者表单元素 <textarea>、<input>、<select> 都是典型的替换元素。

替换元素除了内容可替换这一特性以外，还有以下特性

（1）内容的外观不受页面上的 CSS 的影响

用专业的话讲就是在样式表现在 CSS 作用域之外。如何更改替换元素本身的外观需要类似 appearance 属性，或者浏览器自身暴露的一些样式接口。

（2）有自己的尺寸

在 Web 中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是 300 像素 × 150 像素，如 <video>、<iframe> 或者 <canvas> 等；也有少部分替换元素为 0 像素，如 <img> 图片；而表单元素的替换元素的尺寸则和浏览器有关，没有明显的规律。

（3）在很多 CSS 属性上有自己的一套表现规则

比较具有代表性的就是 vertical-align 属性，对于替换元素和非替换元素，vertical-align 属性值的解释是不一样的。比方说 vertical-align 的默认值 baseline，很简单的属性值，基线之意，被定义为字符 x 的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。

（4）所有的替换元素都是内联水平元素

也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是，替换元素默认的 display 值却是不一样的，有的是 inline，有的是 inline-block。

补充：

• 替换元素与非替换元素的区别是 内容是否可被 CSS 控制：非替换元素（如 <div>、<span>）的内容受 CSS 完全控制；替换元素的内容是独立的（图像像素、控件内部状态），CSS 只能控制元素盒子本身。
• 替换元素的 baseline 是"元素下边缘"，而不是字符 x 的下边缘，这导致 vertical-align 行为不同，常常需要在图片外面包一层 vertical-align: middle/bottom，详见 css-059。
• <img> 的 baseline 是图片的下边缘，所以图片放在行内时底部会与文字基线对齐，产生"幽灵空白节点"。