css3新特性 calc

CSS3新增了一个非常实用的新特性calc()，它可以让我们在CSS中进行简单的计算，并且能够自动计算不同单位之间的转换。

.container{
  width: calc(100% - 40px);
  height: calc(50vh + 20px);
  margin-top: calc(10px * 2);
} 

上面的代码中，我们可以看到calc()的三个使用场景，分别是宽度计算、高度计算和边距计算。计算符号支持加减乘除四种运算，可以直接进行数字计算，也可以进行不同单位之间的转换。比如：

.box{
  width: calc(100% - 20px);
  height: calc(50% - 20px);
  padding: calc(10px / 2); /*每个边距都是5px*/
  transform: translateY(calc(50px + 2rem));
} 

上面的代码中，calc()使用了百分比、像素、字号等多种单位进行了计算，而且在transform属性中还能使用calc()对元素进行位移。

总之，calc()作为CSS3的新特性，可以帮助我们实现更加灵活和自由的元素布局和样式设置，十分值得我们掌握和使用。