美文网首页css学习笔记
css之Content-content内容生成技术

css之Content-content内容生成技术

作者: 白璞1024 | 来源:发表于2018-12-16 17:50 被阅读0次

    贰、content内容生成技术

    content属性基本上在::before ::after两个伪元素中

    1、辅助元素生成

    这里重点不在于content的值,而是为元素本身。我们会把content的值设置成 content:"";
    案例1、清除浮动:

    .clear:after:{
      content:"";
    display:table;/*也可以是'block'*/
    clear:both;
    }
    

    案例2、柱状图

    .box{
      width:250px;
      height:256px;
      text-align:justify
    }
    .box:before{
      content:"";
      display:inline-block;
      height:100%;
    }
    
    .box:after{
      content:"";
      display:inline-block;
      width:100%;
    }
    .bar{
      display:inline-block;
      width:20px;
    }
    
    
    <div class="box"><i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
    <i class="bar"></i>
    </div>
    

    2、字符内容生成

    常见的应用就是配合@font-face规则实现图标字体效果。

    :after{
    content:"\A";
    white-space:pre;
    }
    

    \A \D标示的都是换行,“正在加载中...”的页面的时候,常常需要后头的三个点是动态的,也就是“正在加载中.”=>“正在加载中..”=>“正在加载中...”

    正在加载中<dot>...</dot>
    

    css为

    dot{
      display:inline-block;
      height:1em;
      line-height:1;
      text-align:left;
      vertical-align:-.25em;
      overflow:hidden;
    }
    dot::before{
      display:block;
      content:'...\A..\A.';
      white-space:pre-wrap;
      animation:dot 3s infinite step-start both;
    }
    @keyframes dot{
      33% {transform:translateY(-2em);}
      66% {transform:translateY(-1em);}
    }
    

    ie8不认识dot所以直接显示其内容:...
    ie9不认识animation所以显示第一行内容

    3 、content图片生成

    直接用url功能显示图片

    div:before{
      content:url(1.jgp);
    }
    

    jpg\ png\ ico\ svg\ bace64url都支持,但是不支持css3渐变背景图
    但是实用中更多的是用背景图的方式:

    div:before{
      content:"";
      background:url(1.jpg);
    }
    

    4、content attr属性值的内容生成

    img:aftrer{
      content:attr(alt);
    }
    .icon:before{
      content: attr(data-title);
    }
    

    5、content计数器

    counter-reset counter-increment 和一个方法counter()/counters()

    1>、counter-reset 计数器重置,顺便告诉你从哪里开始计数,默认是0

    .xxx{counter-reset:baiwangye 2;}
    

    ie 和firefox不能识别小数,如果不识别的数字,就从0开始计算,chrome从向下取整开始计算

    可以多个计数器一起实用

    .xxx{counter-reset:baiwangye 2  heiwangye 3;}
    

    2>counter-increment计数器增加

    .counter{
    counter-reset:baiwangye  2;
    counter-increment:baiwangye;
    }
    .counter:before{
    content:counter(baiwangye);/*显示3*/
    }
    
    <p class="count">
    
    • 如果要每次增加3的话:
    .counter{
    counter-increment:baiwangye 3;/*每次增加3*/
    }
    
    • 可以同时增加两个counter
    .counter{
    counter-reset:baiwangye 2  heiwangye 3;
    counter-increment:baiwangye heiwangye;
    }
    
    • 可以增加负数
    .counter{
    counter-increment:baiwangye -1;/*每次减一*/
    }
    
    • 可以是none或者是inherit

    2>counter()这个是方法不是属性

    • counter(name)

    • counter(name,style)
      style是所有list-style-type显示的东西,可以是disc| circle|square |secimal |low-roma|upper-roma等等,需要的具体查看文档材料。
      第二个参数是为了显示的不一定是阿拉伯文字,可能是罗马文等等,这个就是用来显示不同文字的/

    • counters(name,string)用来实现嵌套的

    <div class="reset">
      <div class="counter">
        我是白王爷1
        <div class="reset"><div></div></div>
      </div>
      <div class="counter">我是白王爷2</div>
      <div class="counter">我是白王爷3</div>
      <div class="counter">
        我是白王爷4
        <div class="reset">
          <div class="counter">我是白王爷4的儿子</div>
          <div></div>
        </div>
      </div>
    </div>
    
    
    

    以下写法不对

    <!--这是有问题的-->
    <div class="reset">
      <div class="counter">我是白王爷1</div>
      <div class="reset">
      <div>
       <div class="counter">我是白王爷2</div>
      <div class="counter">我是白王爷3</div>
      <div class="counter">我是白王爷4</div>
      <div class="reset">
            <div class="counter">我是白王爷4的儿子</div>
      <div>
    </div>
    

    相关文章

      网友评论

        本文标题:css之Content-content内容生成技术

        本文链接:https://www.haomeiwen.com/subject/jzexkqtx.html