元素类别

根据元素是否具有可替换内容分为

可替换元素
非替换元素

可替换元素可以通过修改某个属性值改变其呈现内容，如 img, iframe, video, embed，某些元素在特定情况下也可作为可替换元素，如 option audio canvas object applet

可替换元素的特性

样式表现在 CSS 作用域之外
有自身尺寸
对于特定的属性有自身规范

可替换元素都是行内元素，其中

none: input<hidden>
inline: img iframe video
inline-block: select input button textarea
注意：firefox 中 input 与 textarea 默认 inline

可替换元素的尺寸

可替换元素的尺寸通常受以下三类尺寸影响

固有尺寸: 元素的默认尺寸，隐含了宽高比例，该尺寸无法被修改
HTML 尺寸: 通过 HTML 元素属性修改元素尺寸(非 style 属性)
CSS 尺寸: 通过 CSS 指定元素尺寸

优先级： CSS 尺寸 > HTML 尺寸 > 固有尺寸(宽高比例) > 固有尺寸(尺寸数值)

html

<!-- NOTE: 这里图片的尺寸为 200*200,  -->
<style>
  #img {
    width: 200px;
  }
</style>
<!-- 假设这张图片原始宽高 100 * 300 -->
<img id="img" src="xx.png" height="200" />

注意：对于可替换元素，可以通过样式或属性控制元素表现
但对于内容本身的固有尺寸是无法修改的，CSS3 中提供了
object-fit 属性修改内容填充方式

对于 img 的处理

在火狐下缺少 src 属性的 img 标签被视为非可替换元素，且其默认尺寸在各浏览器下不统一

css

img {
  display: inline-block; /* 统一在缺少 src 属性时各浏览器下的表各现 */
  position: relative;
  color: transparent;
  overflow: hidden;
}
img:not([src]) {
  visibility: hidden;
}
/* 图片加载前的空白背景 */
img::before {
  visibility: visible;
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: red;
}
/* 图片加载前的 alt 提示 */
img::after {
  visibility: visible;
  content: attr(alt); /* 将 alt 属性内容作为提示信息 */
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 32px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  transform: translateY(100%);
  transition: transform 300ms;
}
img:hover::after {
  transform: translateY(0);
}

说明：

在缺少 src 属性的情况下，img 元素变为非替换元素，可以设置 ::before 与 ::after 伪类元素
在存在 src 属性的情况下，img 标签变为可替换元素，::before 与 ::after 伪类元素失去作用

content 属性

content 属性通常用于在 ::before 或 ::after 伪元素中插入内容

content 属性插入的内容为匿名的可替换元素

content 属性也可直接用于元素，此时在视觉表现上会替换为 content 内容

content 插入的内容为可替换元素，具有以下特点

若内容为文本则无法选中
不能左右 :empty 伪类
动态生成值无法获取

content 用途

辅助元素生成：通常用于伪元素，设置属性值为空字符串，利用其他 CSS 生成辅助元素

内容实现
- 常用：字体图标，功能字符("\D"CR-回车，"\A"LF-换行)
- 其他
  - 图片替换(content: url())
  - 显示属性(content: attr(attr-name))
  - 符号生成(quotes: '<' '>', content: open-quote, content: close-quote)
  - 显示计数(counter-reset: <name1> <int1> [name2] <int2> ..., counter-increment: <name>, content: counter(<name>, [list-style-type]), counters(name, connector))
- 混合：content 可以一次组合多个生成内容，如 content: open-quote counter(xx) attr(alt)
清除浮动
布局对齐

元素类别 ​

可替换元素的尺寸 ​

对于 img 的处理 ​

content 属性 ​

content 用途 ​

元素类别

可替换元素的尺寸

对于 img 的处理

content 属性

content 用途