calc()函数是CSS中的内置函数, 用于基于CSS属性执行计算。
语法如下:
calc( Expression )
参数:该函数接受单个参数表达这是强制性的。该参数包含需要实现的数学表达式。此参数使用的运算符为:+, -, *, /
下面的程序说明了CSS中的calc()函数:
程序:
<!DOCTYPE html>
< html >
< head >
< title >calc function</ title >
< style >
.geeks {
position: absolute;
left: 50px;
width: calc(100% - 20%);
height:calc(500px - 300px);
background-color: green;
padding-top:30px;
text-align: center;
}
.gfg {
font-size:40px;
font-weight:bold;
color:white
}
h1 {
color:white;
}
</ style >
</ head >
< body >
< div class = "geeks" >
< div class = "gfg" >lsbin</ div >
< h1 >The calc() Function</ h1 >
</ div >
</ body >
</ html >
输出如下: