概述
calc() 此CSS函数让你在声明CSS属性值时执行一些计算。它可以用在如下场合:
、
,
、
语法
/* property: calc(expression) */
width: calc(100% - 80px);
此 calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。
- 加法( + )
- 减法( – )
- 乘法( * ),乘数中至少要有一个是
类型的
- 除法( / ),除数(/右面的数)必须是
类型的
表达式中的操作数可以使用任意
值。如果你愿意,你可以在一个表达式中混用这类值的不同单位。在需要时,你还可以使用小括号来建立计算顺序。
注:
- 用 0 作除数会让 HTML 解析器抛出异常.
(+)和(
-)运算符的两边必须始终要有空白符。
比如calc(50% -8px) 会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值。
而 calc(8px + -50%)会被解析成为一个长度后跟一个加号再跟一个负百分比。
(*)和(/)
运算符不需要空白符,
但考虑到统一性,仍然推荐加上空白符。- 涉及自动和固定布局表中的表列,表列组,表行,表行组和表单元格的宽度和高度百分比的数学表达式可视为已指定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