做一个懒人----CSS之calc()

最新推荐文章于 2026-06-21 15:29:33 发布

原创最新推荐文章于 2026-06-21 15:29:33 发布 · 560 阅读

0 ·

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

标签

#css

学习笔记专栏收录该内容

8 篇文章

订阅专栏

CSS的calc()函数能帮你免去手动计算宽度和高度的烦恼，实现动态计算布局。例如，通过calc(100% - 100px)可以让元素宽度自动适应浏览器宽度减去100px。不同浏览器可能需要前缀，如-webkit-calc()、-moz-calc()和通用的calc()。使用calc()时需注意，加减运算符间要有空格，函数名与括号间不应有空格。

大家在写代码遇到要计算宽度、高度时一定很烦躁吧，每次都要去计算，但是CSS有一个强大的东西能够帮助我们做一个”懒人“，那就是calc()函数。

- calc()语法：

calc(expression)

.test{
    width:-webkit-calc(100% - 100px);
    margin:0 auto;
}
<body>
    <div class="test">
        <p>Hello World!</p>
    </div>
</body>

在上面这个简单的例子中，我们可以得到的结果是div位于浏览器中央（这得益于margin:0 auto;），宽度为浏览器宽度减去100px，这就是calc()的作用，这样设置的好处就是会根据当前浏览器的宽度自动减去100px,这样我们就不用去花太多的心思去计算到底应该应什么样的宽度。

看上述代码会发现-webkit-calc(),这是针对不同的浏览器要使用不同的写法

chrome : -webkit-calc(expression)
Firefox : -moz-calc(expression)
通用 : calc(expression)

-calc()注意事项：

记得第一次写calc()的时候好像不起作用，当时检查了很多遍感觉都是对的，但是就是没有效果，所以很是郁闷，后来发现就是一个空格的问题，所以大家在用calc的时候一定要注意下面的情况：

加号和减号运算符之间必须用空格分隔;

 clac(100% - 100px)

函数名和括号之间不可有空格;

 calc (100% - 100px)

也就是说，calc函数是提供基础运算的函数，我们在这上面可以做很多事情。