CSS calc()函数

一、calc()函数介绍

calc() 函数用于动态计算长度值

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-”, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；

通常用于 保持全屏，如下代码所示；

	<style>
       * {
           margin: 0;
           padding: 0;
       }
       header, footer {
           width: 100%;
           height: 50px;
           line-height: 50px;
           text-align: center;
           background-color: rgb(23, 124, 192);
           color: #fff;
       }
       section {
           width: 100%;
           height: calc(100vh - 100px);
           text-align: center;
           background-color: rgb(22, 136, 121);
           color: #fff;
       }
    </style>
    <header>头部标题</header>
    <section>中间区域</section>
    <footer>底部内容</footer>

二、calc()函数与val()联合使用

clac()函数可以通过val()接收style中传递的参数名为 --xx的变量，常用于动画特效。

	<style>
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                width: 100vw;
                height: 100vh;
                display: flex;
                background: #111;
            }
 
            .container .box {
                margin: 5px;
                width: calc(10px * var(--m));
                height: calc(10px * var(--m));
                background: rgba(0, 255, 0, 0.25);
            }
        </style>
        <div class="container">
            <div class="box" style="--m:1"></div>
            <div class="box" style="--m:2"></div>
            <div class="box" style="--m:3"></div>
            <div class="box" style="--m:4"></div>
            <div class="box" style="--m:5"></div>
            <div class="box" style="--m:6"></div>
            <div class="box" style="--m:7"></div>
            <div class="box" style="--m:8"></div>
            <div class="box" style="--m:9"></div>
            <div class="box" style="--m:10"></div>
        </div>