语法:
calc() = calc(四则运算)
说明:
用于动态计算长度值。
需要注意的是,运算符前后都需要保留一个空格,例如:width:calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持+ - * / 运算
calc()函数使用标准的数学运算优先级规则
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css样式新标准</title> <style type="text/css"> * { margin: 0; padding: 0; } .col-3 { width: calc(100%/3 - 5px);/*means:总是比父容器的1/3小5px,所以5*3=15px*/ float: left; margin-right: calc(5px*3 /2);/*7.5正好与上边计算结果符合*/ background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px; } .col-3:nth-child(3) { margin-right: 0; } </style> </head> <body> <div class="container"> <div class="col-3">1</div> <div class="col-3">2</div> <div class="col-3">3</div> <div class="col-3">4</div> </div> </body> </html>
效果图: