calc()
是css3中新增加的计算元素属性大小的函数,可以动态设定元素的宽度或高度。函数中可以执行加减乘除等简单的数学运算。这种适合用于自适应网页布局设计。
1、使用规则
- 可以使用
“+”,“-”,“*”,“/”
四则运算 - 可以使用百分比、px、em、rem单位进行混合运算
- 表达式中如果有
“+”
或者有“-”
,运算符左右必须有空格
-“*”
和“/”
可以没有空格
2、样例
设父元素宽度为300px:
width: calc(25% + 10px)
:子元素宽度为85px;
width: calc(25% - 2em)
:子元素宽度为107px;
width: calc(25% * 2)
:子元素宽度为150px;
width: calc(40%/2)
:子元素宽度为60px。