CSS3之calc

一、calc()是什么

calc是英文单词calculate(计算)的缩写，是css3新增的功能，calc() 函数用于动态计算长度值。

语法：calc(数学表达式)

语法规则：

calc()函数使用标准的数学运算优先级规则，支持 、、、 四则运算；

可以使用百分比、px、em、rem等单位运算，也可以混合使用各种单位运算

注意：运算符前后都需要保留一个空格

二、浏览器兼容性

浏览器兼容性：需要添加兼容性前缀

示例：

三、使用示例

示例1：手机端一屏显示

使用说明：

（1）html和body需要同时定义高度100%；

（2）头部和底部定高，中间部分使用calc相减；

示例效果图1：

示例2：九宫格

示例效果图12：

扫码二维码关注我们