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

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

苏南大叔:css样式,如何正确书写理解css中的calc函数? - css-calc
css样式,如何正确书写理解css中的calc函数?(图5-1)

本文测试环境:win10chrome@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>

苏南大叔:css样式,如何正确书写理解css中的calc函数? - css-calc-2
css样式,如何正确书写理解css中的calc函数?(图5-3)

核心代码如下:

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

特别说明

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

不被识别的calc

width: calc(100%-300px);

可以正常识别的calc

width: calc(100% - 300px);

苏南大叔:css样式,如何正确书写理解css中的calc函数? - css-calc-3
css样式,如何正确书写理解css中的calc函数?(图5-4)

其次,最好给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>

苏南大叔:css样式,如何正确书写理解css中的calc函数? - 运行代码2
css样式,如何正确书写理解css中的calc函数?(图5-5)

相关链接

总结

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

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

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

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

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