calc() 函数用于动态计算长度值
- 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
- 任何长度值单位都可以使用calc()函数进行计算;
- calc()函数支持 “+”, “-”, “*”, “/” 运算;
- calc()函数使用标准的数学运算优先级规则;
clac() 嵌套
calc() 函数可以嵌套。在函数里边,会被视为简单的括号表达式,如下例所示。
.foo {
width: calc( 100% / calc(100px * 2) );
}
函数的计算值如下所示:
.foo {
width: calc( 100% / (100px * 2) );
}
实例:
1. 我们可以创造一个表达式,用一个百分比减掉一个像素值
.foo {
width: calc(100% - 50px);
}
本例中,.foo 元素总是小于它父元素宽度 50px。
2. 使用 calc() 给我们提供另一个垂直居中元素的解决方案。如果我们知道元素的尺寸,一个典型的解决方案是使用负外边距移动自身距离高与宽的一半,如下所示:
// Assuming .foo is 300px height and 300px width
.foo {
position: absolute
top: 50%;
left: 50%;
marging-top: -150px;
margin-left: -150px;
}
使用 calc() 函数,我们仅仅通过 top 与 left 属性便能实现相同的效果:
.foo {
position: absolute
top: calc(50% - 150px);
left: calc(50% - 150px);
}
3. calc()使计算更加清晰。如果你使一组项目为它们父元素容器宽度的 1/6,你可能值么写:
.foo {
width: 16.666666667%;
}
然而,它能够更加清晰并具有可读性:
.foo {
width: calc(100% / 6);
}