css 计算_css中calc的用法

css 计算_css中calc的用法概述calc()此CSS函数让你在声明CSS属性值时执行一些计算

概述

calc() 此CSS函数让你在声明CSS属性值时执行一些计算。它可以用在如下场合:









语法

/* property: calc(expression) */
width: calc(100% - 80px);

此 calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。

  • 加法( +
  • 减法(
  • 乘法( * ),乘数中至少要有一个是 

     类型的
  • 除法( / ),除数(/右面的数)必须是 

     类型的

表达式中的操作数可以使用任意

 值。如果你愿意,你可以在一个表达式中混用这类值的不同单位。在需要时,你还可以使用小括号来建立计算顺序。

注:

  1. 用 0 作除数会让 HTML 解析器抛出异常.
  2. (+)和(-)运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值。而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。
  3. (*)和(/)运算符不需要空白符,但考虑到统一性,仍然推荐加上空白符。
  4. 涉及自动和固定布局表中的表列,表列组,表行,表行组和表单元格的宽度和高度百分比的数学表达式可视为已指定auto。

正式语法

calc( <calc-sum> )
where 
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

where 
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

where 
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

 

 

今天的文章css 计算_css中calc的用法分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/75568.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注