CSS calc()函数

原创已于 2022-06-24 11:58:17 修改 · 1.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #前端 #css3

于 2022-06-24 11:57:18 首次发布

随笔专栏收录该内容

14 篇文章

订阅专栏

本文介绍了CSS calc()函数的用法，它允许动态计算长度值，常用于全屏布局。示例展示了如何使用calc()确保元素高度充满视口减去固定值。同时，讲解了calc()与CSS变量（var()）结合，通过设置--m变量实现不同大小的方块动画效果，展示了其在前端动态效果中的应用。

一、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>