语法：
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>效果图：
扫一扫
2346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
