CSS 函数 - calc()

CSS 函数calc()允许在定义 CSS 属性时计算值。它适用于 <length>、<frequency>、<angle>、<time>、<percentage>、<number> 或 <integer>的值。

函数calc()接受一个表达式作为参数，并将该表达式的结果用作值。

表达式可以包含不同的运算符，并遵循运算符优先级的标准规则。

+ 加法。
- 减法
* 乘法。至少一个参数必须是 <number>。
/ 除法。右侧必须是 <number>。

注意事项

calc() 中的+ 和- 运算符必须用空格分隔，以避免混淆。
calc() 中的* 和/ 运算符不需要空格，尽管为了保持一致性建议包含空格。
在自动和固定布局表格中，表格列、列组、行、行组和单元格的宽度和高度使用百分比的数学表达式可能会被视为已指定auto。
允许嵌套calc() 函数，将内部函数视为简单的括号。
calc() 函数不能直接用百分比值替换数值。
对于长度，不能使用0来表示 0px 或任何其他长度单位。必须指定带单位的版本。

语法

calc( <calc-sum> )

与整数一起使用

当calc() 用于需要<integer> 的上下文中时，该值将四舍五入到最接近的整数。例如

.modal {
   z-index: calc(6 / 4);
}

这将使.modal 的最终 z-index 值为 2。

CSS calc() - 定位对象

以下示例演示了calc() 的用法。calc() 用于计算框的高度和宽度，从而产生一个响应式布局，并在框周围始终保持 50px 的边距。

<html>
<head>
<style>
   .container {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }   
   .box {
      width: calc(100% - 99px);
      height: calc(100% - 99px);
      margin: 50px;
      background-color: gray;
      text-align: center;
    }
</style>
</head>
<body>
   <div class="container">
      <div class="box">
         <h2>This is an example of calc()</h2>
      </div>
   </div>
</body>
</html>

CSS calc() - 表单字段的自动大小调整。

Calc() 还可以用于确保表单字段适合可用空间，而不会超出其容器的边缘，同时保持合理的边距。

以下示例显示了使用calc() 调整表单字段的大小

<html>
<head>
<style>
   form {
      display: flex;
      flex-direction: column;
      align-items: center;
         background-color: lightblue;
   }
   input[type="text"], textarea {
      width: calc(100% - 50px);
      padding: 10px;
      margin: 10px;
      border-radius: 5px;
      border: 1px solid #ccc;
      resize: none;
   }
   input[type="submit"] {
      padding: 10px 20px;
      margin: 10px;
      border-radius: 5px;
      border: none;
      background-color: #4CAF50;
      color: #fff;
      font-size: 16px;
      cursor: pointer;
   }
</style>
</head>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" placeholder="Enter your name">
      <label for="email">Email:</label>
      <input type="text" id="email" name="email" placeholder="Enter your email">
      <label for="message">Message:</label>
      <textarea id="message" name="message" placeholder="Enter your message"></textarea>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

CSS calc() - 使用 CSS 变量嵌套 calc()

calc() 也可以与 CSS 变量结合使用。以下示例显示了带有 CSS 变量的calc()

<html>
<head>
<style>
   :root {
      --width: 200px;
      --padding: 20px;
   }
   .container {
      width: calc(var(--width) + var(--padding));
      background-color: lightgray;
      padding: var(--padding);
   }
   .box {
      width: calc(var(--width) / 2);
      height: calc(var(--width) / 2);
      background-color: black;
      margin: 0 auto;
   }
</style>
</head>
<body>
   <div class="container">
   <div class="box"></div>
</div>
</body>
</html>

打印页面