美文网首页
css3 calc()

css3 calc()

作者: 会飞的贼er | 来源:发表于2021-07-26 21:28 被阅读0次
    .foo {
        height: calc(100% - 50px);
    }
    
    什么是calc()

    calc是英文单词calculate(计算)的缩写,calc()是css3的一个新增的功能,用来指定元素的长度。比如说,你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体布局上,可以通过calc()计算得到元素的宽度。

    calc()能做什么?

    calc()能让你给元素的做计算,你可以给一个div元素,使用百分比、em、px和rem单位值计算出其宽度或者高度,比如说“width:calc(50% + 2em)”,这样一来你就不用考虑元素DIV的宽度值到底是多少,而把这个烦人的任务交由浏览器去计算。

    calc()语法

    calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:

    .elm {
      width: calc(expression);
    }
    //其中"expression"是一个表达式,用来计算长度的表达式。
    
    calc()的运算规则

    使用“+”、“-”、“” 和 “/”四则运算;
    可以使用百分比、px、em、rem等单位;
    可以混合使用各种单位进行计算;
    表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(12%+5em)"这种没有空格的写法是错误的;
    表达式中有“
    ”和“/”时,其前后可以没有空格,但建议留有空格。

    运算百分比

    除了基本的px,%,em等,还有:
    vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
    vh:视窗高度的百分比
    vmin:当前 vw 和 vh 中较小的一个值
    vmax:当前 vw 和 vh 中较大的一个值

    兼容性:

    桌面 PC
    Chrome:自 26 版起就完美支持
    Firefox:自 19 版起就完美支持
    Safari:自 6.1 版起就完美支持
    Opera:自 15 版起就完美支持
    IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)
    大家在实际使用时,同样需要添加浏览器的前缀

     .elm {
        /*Firefox*/
        -moz-calc(expression);
        /*chrome safari*/
        -webkit-calc(expression);
        /*Standard */
        calc();
     }
    

    移动设备
    Android:自 4.4 版起就完美支持
    iOS:自 iOS8 版起就完美支持

    相关文章

      网友评论

          本文标题:css3 calc()

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