博客

calc的使用

calc是css新增的功能，用来计算元素长度。

可以使用calc（）给元素计算 border,margin,padding,width,font-size等属性设置动态值；

calc（）最大的好处就是用在流体布局中，计算元素宽度。

calc语法

使用数学表达式表示，就像 加 减 乘 除 一样；

.right {
	  width: calc(100% - 120px);
}

calc的运算规则

使用通用的数学运算规则：”+”、”-“、”*”、”/”；

可以使用百分比、rem、px等单位；

可以混合各种单位进行运算；

表达式中有”+” 和 “-” 时，前后必须要加空格，如：width: calc(100%-120px) 就是错误的；

表达式中有 ” * ” 和 ” / ” 时，前后可以不留空格，但建议留有空格。