首页 > Web开发 > 详细

CSS进阶(二)content

时间:2018-10-12 01:07:48      阅读:45      评论:0      收藏:0      [点我收藏+]

标签:就是   区别   无效   for   chrom   我们   修改   base   ffffff   

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

CSS进阶(二)content

标签:就是   区别   无效   for   chrom   我们   修改   base   ffffff   

原文:https://www.cnblogs.com/goOtter/p/9769917.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号