content
什么是替换元素
表单元素Input button textarea select img iframe video
替换元素的特点
（1）内容的外观不受页面上的CSS影响
（2）有自己的尺寸
（3）在很多CSS属性上有自己的一套表现规则
替换元素的尺寸计算规则
（1）固有尺寸，及元素的默认尺寸
（2）HTML尺寸，即html元素上自带的属性尺寸
（3）CSS尺寸，即设置的CSS尺寸
<img>不设置src属性，是最高效的空表现方式
建议在css重置的时候加上img{display:inline-block;}
我们无法改变替换元素内容的固有尺寸
图片content替换内容默认的适配方式是填充（Object-fit:fill;），也就是外部的CSS尺寸或HTML尺寸多大，就填充多大。该属性在CSS3中可以通过Object-fit属性修改
tips
替换元素与非替换元素区别就在于src属性的点是“基于伪元素的图片内容生成技术”，即::befores和::after
目前IE不支持，想让Chrome和FireFox生效
（1）不能有src属性
（2）不能使用Content属性生成图片
（3）需要有alt属性并有值
（4）firefox下::before属性无效，::after没有问题
替换元素与非替换元素之间只隔了一个CSS的content属性，可以通过设置元素的content来替换图片，但不能控制图片的大小，只能替换图片或使用svg矢量图
content生成的内容都是替换元素
（1）content生成的文本无法选择和复制，且替换的仅仅是视图层的内容，形如::before和::after
（2）content生成的内容不会被：empty伪类捕获
（3）content动态生成值无法获取
用法
（1）content辅助元素生成
（2）content字符内容生成 /A /D具有换行效果
（3）content生成图片，伪元素中使用图片更多的是使用background-image。使用base64图片
（4）content开启闭合符号的生成。可以设置css属性quotes的内容，在content中使用open-quote 和close-quote进行调用。quotes可以设置任意的字符，不仅仅是引号
（5）content属性值内容生成
div:after{
content: attr(alt);//attr(data-title)
}
（6）content计数器
content计数值的那个DOM元素在文档流中的位置一定要在counter-increment元素后面
（7）content的内容生成可以自由发挥，混合上面的特性
原文地址：https://www.cnblogs.com/goOtter/p/9769917.html