美文网首页
calc 概述

calc 概述

作者: 林键燃 | 来源:发表于2018-10-25 16:35 被阅读6次

概述

calc 英文单词 calculate 的缩写,css3的一个功能,用来指定元素长度。

语法

/* property: calc(expression); */

width: calc(100% - 80px)

运算规则

使用通用的数学运算规则,以及更加强大的功能:

  • 可以使用“+”、“-”、“*” 和 “/”四则运算;

  • 可以使用百分比、px、em、rem等单位进行运算,同时支持使用各种单位混合运算;

  • 表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(100%-80px)"这种没有空格的写法是错误的;

  • 表达式中有“*”和“/”时,其前后可以没有空格,但建议保留空格。

  • 在 less 中需要加“~”(不加可能会出现解析错误,之后更新版本的less 和 less-loader 可能会解决这个问题),如

    width: ~"calc(100% - 80px)"
    width: calc(~"100% -80px")
    

相关文章

  • calc 概述

    概述 calc 英文单词 calculate 的缩写,css3的一个功能,用来指定元素长度。 语法 运算规则 使用...

  • 微信小程序 加法计算器

    1、新建目录calc2、pages加上"pages/calc/calc", 3、 calc.wxml

  • css3

    calc() 计算 width: calc(100% - 80px) heigth: calc(2em * 5) ...

  • 数据运算

    calc('+',1,2) // 3calc('-',1,2) // -2calc('*',2,3) // 6ca...

  • less下calc混合单位运算

    问题 在less中,使用calc(100% - 7px)或者calc(100% - 7rem)的结果都是calc(...

  • CSS3之calc()

    一、calc()是什么 calc是英文单词calculate(计算)的缩写,是css3新增的功能,calc() 函...

  • CSS3 calc()函数使用

    1、calc是什么? calc是英文单词calculate(计算)的缩写,用于动态计算长度值。 calc()函数支...

  • RoarCTF 部分WP

    WEB easy_calc 访问calc.php不带num参数的时候就可以得到calc.php源码 输入?num=...

  • calc() will-change filter属性

    calc()函数,用于动态计算长度值。 任何长度值都可以使用calc()函数进行计算;calc()函数支持 "+"...

  • calc(100vh - 90px)

    正常:calc(100% - 90px)less: calc(~"100% - 90px")

网友评论

      本文标题:calc 概述

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