CSS3中的calc()函数浅析

calc() 函数在 CSS3 中是一个非常实用的函数，它可以用于简便地计算两个或多个值之间的运算。下面将从如下几个方面来讲解calc()函数：

1. 什么是calc()函数及其语法
2. 示例演示
3. 注意事项

1. 什么是calc()函数及其语法

calc() 函数用于计算CSS属性值。有时候我们需要在样式表中写入数学表达式，比如计算一个 div 的宽度，我们可以用以下的表达式：

div {
  width: 100% - 50px;
}

但是在CSS中使用这种表达式会出现意想不到的错误。我们可以使用 calc() 函数来避免这种问题。

calc() 里面可以包含如下的运算符：

运算符	描述
+	加法
-	减法
*	乘法
/	除法

calc() 函数的语法如下：

属性名: calc(运算表达式);

举个例子：

div {
  width: calc(100% - 50px);
  height: calc(50% * 2);
}

2. 示例演示

2.1 示例1：实现两个div等分屏幕

我们可以使用如下的代码实现两个div在屏幕中等分的布局：

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

.container {
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
}

.left {
  width: calc(50% - 10px);
  margin: 0 5px;
  background-color: #f0f0f0;
}

.right {
  width: calc(50% - 10px);
  margin: 0 5px;
  background-color: #c0c0c0;
}

这里的 calc() 函数中使用了 - 运算符来计算两个div的宽度。

2.2 示例2：实现动态计算字体大小

我们可以先设置一个集合class：

/* 等分字数 */
.equal-font {
  font-size: calc(1em + 14px - 3vw);
  /* 1em代表的是去掉了字体影响下的“中文字符”的大小。例如，字体大小为16px时，1em的值为16px（如果没有其他样式干扰） */
}

此时，我们在使用这个class的时候，页面上每行能够显示的中文字数就会动态计算，会随着屏幕大小的变化而调整。

<p class="equal-font">我是一个段落</p>

3. 注意事项

• calc() 函数中不能使用百分比。
• calc() 函数的表达式中，最少需要一个号码值和一个运算符。
• calc() 函数中的表达式不区分大小写。

以上就是对 calc() 函数的简单介绍以及使用方法和示例。