css计算属性calc的使用

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)