css calc 方法

CSS中的calc方法，可以帮助我们实现一些复杂的布局效果。这个方法可以让我们在CSS中使用像素、百分比、em、rem等多种单位来进行数学运算。

    .Box {
        width: calc(100% - 20px);
        height: calc(50vh - 50px);
        padding: 20px;
        margin: calc(2rem + 10px);
    }

在上面的代码中，我们使用了calc方法来计算盒子的宽度、高度、内外边距等。calc方法的语法很简单，就是将数学表达式放在calc()函数中，然后使用像素、百分比、em、rem等单位进行运算。

除了上面的基本运算以外，calc方法还支持更加高级的运算方法，比如min()和max()。min()方法可以让我们取多个值中的最小值，而max()方法则可以取多个值中的最大值。

    .Box {
        width: calc(min(100%,600px));
        height: calc(max(50vw,300px));
    }

上面的代码中，我们使用了min()和max()方法来限制盒子的宽度和高度，让它们不会超过一定的范围。

使用calc方法可以让我们在布局过程中更加灵活和便捷，尤其是当我们需要实现一些复杂的响应式布局效果的时候。