您的位置:首页 > Web前端 > > 正文

css3独有属性(CSS3 calc会计算属性详解)

更多 时间:2022-03-28 01:02:53 类别:Web前端 浏览量:1334

css3独有属性

CSS3 calc会计算属性详解

前言

正如其名,calc是css3中新增的计算属性,让很多属性增加了一个表达式的说法;

calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,你可以使用calc()给元素的border、margin、pading、font-size、width和height等属性设置动态值。

怎么使用

calc()可以使用数学运算中的简单加(+)、减(-)、乘(*)和除(/)来解决问题,而且还可以根据单位如px,em,rem和百分比来转化计算。
标准的写法:

  •   .class{
           /*
             area: expression;
           */
           width:calc();
           padding:calc();
           margin-top:calc();
           ...
       }
    
    
  • 兼容性

    css3独有属性(CSS3 calc会计算属性详解)

    基本理论

    1. calc可以做用于任何具有大小的东东,比如border、margin、pading、font-size和width等属性设置动态值
    2. 支持的运算单位: rem , em , percentage , px
    3. 计算优先级别和数学一致

    注意点:

    calc 内部的表达式,在使用运算符号时,两遍必须加上空格(虽然乘除可以无视,但还是建议带上)!!!!!,不然会解析错误!!,看演示写法

  •     width:calc(10 * 10px);
        width:calc(50% - 50px);
        width:calc(50% + 5em);
        width:calc(10% / 1rem);
    
  • 小demo

    仅仅作为演示,响应伸缩

    css3独有属性(CSS3 calc会计算属性详解)

    代码

  • <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>CSS3 Calc</title>
        <style type="text/css" media="screen">
            html{
                font-size:62.5%;
            }
            .wrapper{
                width:100%;
                border:5px solid #f00;
                margin:10px ;
                box-sizing:border-box;
                height:200px;
                clear:b;
            }
            .items{
                height:calc(100% - 40px);
                display:inline-block;
                border:1px solid #f70;
                text-align:center;
            }
    
            .w1 .items{
    
                float:left;
                margin-top:calc( 5 * 4px  );
                border:3px solid #0F16C6;
                width:calc(100% / 3 - 6px)
            }
    
            .w2 .items{
                float:left;
                margin-top:calc(200px - 20px * 9);
                width:calc(100% / 3 - 2px)
            }
    
            .w3 .items{
                float:left;
                width:calc(100% / 3 - (3 * 6px));
                margin:calc(2px * 4 );
            }
    
            .w3 .items:first-child{
                padding:calc(5 * 1rem - 3rem);
                box-sizing:border-box;
            }
    
        </style>
    </head>
    
    <body>
        <li class="wrapper w1">
            <li class="items">margin-top:calc( 5 * 4px  );</li>
            <li class="items">margin-top:calc( 5 * 4px  );</li>
            <li class="items">margin-top:calc( 5 * 4px  );</li>
        </li>
        <li class="wrapper w2">
            <li class="items">margin-top:calc(200px - 20px * 9);</li>
            <li class="items">margin-top:calc(200px - 20px * 9);</li>
            <li class="items">margin-top:calc(200px - 20px * 9);</li>
        </li>
        <li class="wrapper w3">
            <li class="items">width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 );<br>padding:calc(5 * 1rem - 3rem);</li>
            <li class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</li>
            <li class="items";>width:calc(100% / 3 - (3 * 6px));<br>margin:calc(2px * 4 )</li>
        </li>
    </body>
    </html>
    
    
  • 总结

    calac 和flexbox搭配,用来写流式布局非常好;

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    您可能感兴趣