calc()的工作方式

计算完成后的值是表达式本身而不是计算后的值

用CSS预编译器做数学计算时,传给浏览器的值是已经计算好的值

// Value specified in SCSS
.foo {
    width: 100px + 50px;
}

// Compiled CSS and computed value in browser
.foo {
    width: 150px;
}

// Value specified in CSS
.foo {
    width: calc(100% - 50px);
}

// Computed value in browser
.foo {
    width: calc(100% - 50px);
}

如何使用calc

calc能用数字类型的属性进行加减乘除的运算,能运用于<length>, <frequency>, <angle>, <time>, <number>, or <integer>数据类型.

.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

calc的嵌套

.foo {
    width: calc( 100% / calc(100px * 2) );
}

什么时候使用calc

Center

Using calc() provides us yet another solution to the age-old problem of centering elements horizontally and vertically within a container. If we know the dimensions of the child element, a typical solution is to use negative margins to shift the element by half it's height and width, l

在知道子元素尺寸的情况下可以通过负边距来平移元素

//假设foo300px高和300px宽
.foo {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}
//可以写成
.foo {
    position: absolute
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}
百分比的时候

当设定一个元素是其父元素的6分之一时,我们通常设置

.foo {
    width: 16.666666667%;
}

我们可以使用calc更加简洁的设置

.foo {
    width: calc(100% / 6);
}
设置一个根网格大小

calc可以用来代替rem来设置一个基于视窗大小的数字,一个rem相当于30分之一的
视窗大小。

html {  
    font-size: calc(100vw / 30);
}