calc() 此CSS函数让你在声明CSS属性值时执行一些计算。它可以用在如下场合:<length>、<frequency>, <angle>、<time>、<number>、或<integer>
- 此 calc()函数用一个表达式作为它的参数,用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合,采用标准操作符处理法则的简单表达式。
- +
- 加法
- -
- 减法
- *
- 乘法,乘数中至少要有一个是
<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>