Detailed Explanation of the calc() Function in CSS

Description
calc() is a function in CSS used to perform dynamic calculations when declaring property values. It allows mixing different units (such as px, %, em, vw, etc.) and uses addition, subtraction, multiplication, and division to obtain the final value. This capability is particularly useful in responsive layouts where dimensions need to be dynamically adjusted.

Core Features and Rules

1. Operator Requirements: Spaces must be placed before and after addition and subtraction operators (+, -). Multiplication and division operators (*, /) do not have this requirement, but adding spaces uniformly is recommended for better readability.
2. Order of Operations: Supports nested parentheses to change priority; the calculation rules are consistent with standard mathematics.
3. Unit Mixing: Allows calculations across different units (e.g., 100% - 20px). However, in multiplication and division, at least one operand must be a numeric value (e.g., 2 * 10px is valid, 2px * 10px is invalid).
4. Compatibility: Fully supported by modern browsers, but compatibility issues with older browsers (such as IE8) should be noted.

Application Scenarios and Examples

1. Dynamic Width Calculation in Responsive Layouts

.container {
  width: calc(100% - 40px); /* The container width is always the parent element's width minus 40px */
  margin: 0 auto;
}

2. Gap Handling in Grid Layouts

.grid {
  display: grid;
  grid-template-columns: repeat(3, calc(100% / 3 - 10px));
  gap: 15px;
}
/* Evenly divides the width while accounting for gap influence through calculation */

3. Dynamic Font Size Adjustment

.text {
  font-size: calc(1rem + 1vw); /* Font size scales proportionally with the viewport width */
}

4. Vertical Centering Positioning (Combined with transform)

.center {
  position: absolute;
  top: calc(50% - 20px); /* Achieves vertical centering when the element height is 40px */
  left: calc(50% - 30px); /* Similarly for horizontal centering */
}

Common Issues and Considerations

• Nested Usage: calc() supports nesting, but overcomplication should be avoided (e.g., calc( (100% - calc(10px * 2)) / 3 ) can be simplified to calc((100% - 20px) / 3)).
• Fallback Strategies: For older browsers, static values can be written first as a fallback (e.g., width: 80%; width: calc(100% - 20px);).
• Division Limitations: The divisor must be a numeric value (e.g., calc(100% / 2) is valid, calc(100% / 2px) is invalid).

Advanced Techniques
Combining with CSS Variables for Dynamic Themes:

:root {
  --spacing: 10px;
}
.element {
  padding: calc(var(--spacing) * 2); /* Dynamically controls spacing through variables */
}

By flexibly using calc(), the flexibility of layouts and the maintainability of code can be significantly improved, especially in scenarios requiring precise control over dimensional relationships.