css中calc的加减乘除

在CSS中，我们可以使用calc()函数来进行计算，包括加、减、乘和除四则运算。

.box{
  width: calc(100% - 50px);
  height: calc(50vh + 20%);
  font-size: calc(10px * 2);
  line-height: calc(20px / 2);
}

在上面的代码示例中，我们可以看到calc()函数的使用方法。它以一个表达式作为参数，表达式可以包括加、减、乘和除四则运算，其中，加减符号必须放在表达式的两端，而乘除符号可以放在表达式的任意位置。

在width属性中，我们使用了减号，表示元素的宽度为父元素宽度减去50px，这可以很方便地实现自适应布局。

在height属性中，我们使用了加号和百分号，表示元素的高度为视口高度加上其父元素高度的20%。

在font-size属性中，我们使用了乘号，表示元素的字体大小为10px的两倍。

在line-height属性中，我们使用了除号，表示元素的行高为20px除以2。

通过calc()函数，我们可以更方便地实现一些复杂的样式计算，同时也提高了CSS代码的可读性和维护性。