CSS3中的calc（）计算函数
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: absolutemargin属性值可以为百分比
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); }

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。