css3中样式计算属性calc（）的使⽤和总结
calc的介绍
在css3样式中有⼀个类似与函数的计算属性calc()，它主要⽤于指定元素的长度，⽆论是border、margin、pading、font-size和width等属性都可以使⽤calc来设置动态值。calc⽀持的运算单位有rem , em , %, px，calc是⽀持单位的混合使⽤的，其计算优先级别和数学⼀致。
calc的⽤法
.elm{
width:calc(expression);
}
其中，expression是⼀个⽤来计算长度的表达式，⽀持“+”，“-”，“*”，“/”运算符。
注意1：表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；⽽对于“*”，“/”并没有这种要求，但为了风格的统⼀，建议前后也要留空格。例如：
width: calc(100% -8px); /* 这样会出错，结果为0 */
width: calc(100% - 8px); /* 当 + -  符号⽤空格隔开时，运算成功 */
注意2：使⽤ * / 运算符时，必须保证有⼀个值为数值类型;
calc的兼容:
在IE9+、FF4.0+、Chrome19+、Safari6+⽀持较好，移动端⽀持不理想。如图：
兼容性前缀：
.elm{
width: calc(80% - 10px);
width: -moz-calc(80% - 10px);  /*Firefox*/
width: -webkit-calc(80% - 10px);  /*chrome safari*/
}
在less如何使⽤
由于less中会把它当表达式计算掉了，需要在参数外⾯加上: ~("expression")，如：
.elm{
width: calc(~"100% - 80px");
}
或者使⽤e(“”)包裹在⾥⾯，如：
width:e("calc(100% - 80px)");
可如果要⽤变量怎么⽤呢？也不复杂，像下⾯这样就搞定啦。
.class {
@cap: 50px;
height: calc(~"100% - @{cap}");
}
calc实现适应布局例⼦
必须使⽤设置百分⽐页⾯同时⼜有margin时，会出现不够满挤到下⼀⾏的情况，所以要⽤到calc重新计算百分⽐<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-6"></div>
margin属性怎么用<div class="col-sm-4 col-xs-6"></div>
<div class="col-sm-4 col-xs-12"></div>
</div>
<div class="row">
<div class="col-sm-3 col-xs-3"></div>
<div class="col-sm-6 col-xs-6"></div>
<div class="col-sm-3 col-xs-3"></div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-2"></div>
<div class="col-sm-1 col-xs-2"></div>
<div class="col-sm-2 col-xs-8"></div>
<div class="col-sm-2 col-xs-3"></div>
<div class="col-sm-6 col-xs-3"></div>
</div>
</div>
@media screen and (min-width:768px){
.col-sm-1{
width: calc(8.1% - 20px);
}
.col-sm-2{
width: calc(16.7% - 20px);
}
.col-sm-3{
width: calc(25% - 20px);
}
.col-sm-4{
width: calc(33.3% - 20px);
}
.col-sm-6{
width: calc(50%- 20px);
}
.col-sm-12{
width: calc(100% - 20px);
}
}

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