css样式，如何正确书写理解css中的calc函数？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

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

应用场景

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

当然，传统的方案是利用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>

核心代码如下：

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

特别说明

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

不被识别的calc：

width: calc(100%-300px);

可以正常识别的calc：

width: calc(100% - 300px);

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

比如：

min-width: 200px;

题外话（另外一个题目）

下面的是一个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>

相关链接

• https://newsn.net/say/css-caret-color.html
• https://newsn.net/say/css-nth-child.html
• https://newsn.net/say/css-nth-of-type.html

总结

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

• https://newsn.net/tag/css/

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