我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

苏南大叔在本文中分享的是css中的calc函数，非常简单，高手可以直接飘过。

苏南大叔：css样式，如何正确书写理解css中的calc函数？ - css-calc
css样式，如何正确书写理解css中的calc函数？（图5-1）

本文测试环境：win10，chrome@96.0.4664.45。既然标题中强调了“书写”这两个字，所以，写法格式就很重要了。如果您的calc函数没有生效，请检查格式是否正确。运算符两边是否留有空格呢？

应用场景

一般来说，这里的应用场景很常见：一个按比例显示的盒子模型里面，右侧有个固定宽度的边位，而左侧的宽度可变。

苏南大叔：css样式，如何正确书写理解css中的calc函数？ - css-calc-demo
css样式，如何正确书写理解css中的calc函数？（图5-2）

当然，传统的方案是利用js做计算。但是，css也能做到的事情，为啥劳烦js呢？

代码

基本代码如下：

<style>
    .container{
        width: 100%;
        background: pink;
    }
    .left{
        /* width: calc(100%-300px); */
        width: calc(100% - 300px);
        min-width: 200px;
        background: red;
        height:500px;
        float:left;
    }
    .right{
        width: 300px;
        background: blue;
        height:500px;
        float:left;
    }
</style>
<div class="container">
    <div class="left">
        可变宽度
    </div>
    <div class="right">
        固定宽度
    </div>
</div>
HTML

苏南大叔：css样式，如何正确书写理解css中的calc函数？ - css-calc-2
css样式，如何正确书写理解css中的calc函数？（图5-3）

核心代码如下：

width: calc(100% - 300px);
min-width: 200px;
CSS

特别说明

首先，calc函数里面运算符两边需要有空格，否则是不识别的哦。这个和传统的css是不一样的。下面是两者的对比：

不被识别的calc：

width: calc(100%-300px);
CSS

可以正常识别的calc：

width: calc(100% - 300px);
CSS

苏南大叔：css样式，如何正确书写理解css中的calc函数？ - css-calc-3
css样式，如何正确书写理解css中的calc函数？（图5-4）

其次，最好给calc的主体设置一个min-或者max-。因为这种运算只是简单运算，不能判断边界情况。比如本文中的宽度，如果为负数的话，显然就没有意义了。但是，浏览器也不会报错。

比如：

min-width: 200px;
CSS

题外话（另外一个题目）

下面的是一个calc的经典布局：

<style>
    * { box-sizing: border-box;}
    body{ font-size: 14px;margin: 0px;padding: 0px; }
    h1 { font-size: 4em; margin: 0.5em; text-align: center; }
    main { float: left; width: calc(100% - 280px); 
                background-color: blue;margin: 0px;min-height: 360px;}
    aside {
        text-align: left;
        float: right;
        width: 280px;
        padding: 0;
        margin: 0;
        font-size: 0.875em;
        background-color:red;
        min-height: 360px;
    }
</style>
<h1>标题</h1>
<main>主体</main>
<aside>侧边</aside>
HTML

苏南大叔：css样式，如何正确书写理解css中的calc函数？ - 运行代码2
css样式，如何正确书写理解css中的calc函数？（图5-5）

相关链接

总结

在css浏览器里面使用calc函数，是非常便利的。目前主流浏览器都是支持这种写法的。更多css小技巧，可以参考苏南大叔的博客：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   css