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>