CSS进阶（二）content

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的内容生成可以自由发挥，混合上面的特性