概念

可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

特点

CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。

某些可替换元素 <iframe> 元素，可能具有自己的样式表，但它们不会继承父文档的样式。

CSS 部分属性可以调整元素内容在其框中的位置或定位方式

元素

<iframe>、<video>、<embed>、<img>

特殊的可替换元素

<option>、<audio>、<canvas>、<object>

type 为 image 的 Input 为可替换元素

::before 和 ::after 伪元素中插入内容是匿名的可替换元素。

• 无法选中、无法复制的
• 无法被屏幕阅读设备读取
• 无法被搜索引擎抓取
• 生成的内容不能左右 :empty 伪类
• 动态生成值无法获取

CSS 与可替换元素

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

• <video>、<iframe> 或者 <canvas> 默认 300 像素 × 150 像素
• img 默认0px

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

vertical-align 的默认值的 baseline，定义为字符 x 的下边缘，而替换元素的基线定义成了元素的下边缘

控制内容框中的对象位置

某些 CSS 属性可以指定可替换元素中包含的内容对象在该元素的盒区域内的位置或定位方式

• object-fit

  指定可替换元素的内容对象在元素盒区域中的填充方式。类似 background-size

• object-position

  指定可替换元素的内容对象在元素盒区域中的位置。类似 background-position

通过修改某个属性值呈现的内容

<img>、<object>、<video>、<iframe> 或者表单元素 <textarea> 和 <input> 和 <select>

都是行内元素

display 有的是 inline，有的是 inline-block

计算规则

css 尺寸 > HTML 尺寸 > 固有尺寸

固有尺寸

• 替换内容作为独立文件原本的尺寸
• 含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示

HTML 尺寸

<img> 的 width 和 height 属性

<input> 的 size 属性

<textarea> 的 cols 和 rows 属性

CSS 尺寸

width 和 height