CSS3之calc

一、calc()是什么

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

语法:calc(数学表达式)

语法规则:

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

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

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

二、浏览器兼容性

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

示例:

三、使用示例

示例1:手机端一屏显示

使用说明:

(1)html和body需要同时定义高度100%;

(2)头部和底部定高,中间部分使用calc相减;

示例效果图1:

示例2:九宫格

示例效果图12:

扫码二维码关注我们

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180717G0FQLH00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券