calc() 此CSS函数让你在声明CSS属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<number>、或<integer>
<number> 类型的<number> 类型的表达式中的操作数可以使用任意<length> 值。如果你愿意，你可以在一个表达式中混用这类值的不同单位。在需要时，你还可以使用小括号来建立计算顺序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.d1 {
width: 400px;
height: 300px;
background: lavender;
position: relative;
}
.d2 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
height: 10px;
background: black;
}
</style>
</head>
<body>
<div class="d1">
<div class="d2">
</div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/lilei-site/p/11785305.html