css计算属性calc的使用
基本使用规则
1.计算时可带单位,可用百分比:
px % em rem in mm cm pt pc ex ch vh vw vmin vmax
2.支持 “+” , “-” , “*” , “/” 四则运算
运算符与数字之间必须有空格
加减是必须都带相同单位或百分比与一个带单位
乘除是只能有一个带单位
calc与括号之间不能有空格
不能除以0
width: calc(300px - 100px);
height: calc(90px / 3);
width: calc(100% - 10px);
3.可以嵌套
width: calc(50%);
height: calc(calc(100% - 20px) / 2);
常见使用场景
自适应布局,但是不适用 flex (ie支持性不太好)
// 一行放四个盒子,每个盒子中间相隔20px
width: calc(calc(100% - 60px) / 4);
特定的宽高
width: calc(100% - 20px)
heigth: calc(100% - 20px)