CSS calc()函数用法介绍

2021年3月13日17:09:20 发表评论 1,145 次浏览

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 >

输出如下:

CSS | calc()函数1

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: