定义与用法
calc() 函数用于动态计算长度值
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 “+”, “-”, “*”, “/” 运算;
calc()函数使用标准的数学运算优先级规则;
语法
此 calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。
width: calc(100% - 80px);
例子
固定一侧的宽度,另外一侧自适应宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.box
{
width: 100%;
height: 60px;
border: 1px solid black;
}
.box-left
{
float: left;
width: 280px;
height: 100%;
background-color: lightskyblue;
}
.box-right
{
float: right;
width: calc(100% - 280px);
height: 100%;
background-color: hotpink;
}
</style>
</head>
<body>
<div class="box">
<div class="box-left"></div>
<div class="box-right"></div>
</div>
</body>
</html>