CSS's calc() function allows mathematical operations to be performed directly in style sheets. Its basic syntax includes four operations: addition, subtraction, multiplication and division, and requires spaces to be added when using the sum- operator. The main uses include: 1. Adjust the width without changing the box model (such as deducting the inner margin); 2. Dynamically position elements (such as centering based on percentages and fine-tuning the position); 3. Mix different units for calculations (such as combining viewport units and pixels). Additionally, calc() supports nested use, but overcomplexity should be avoided to maintain readability. Browser compatibility is good and there is no need to add prefixes, but potential issues need to be paid attention to when dealing with older browsers (such as IE11). It is recommended to add comments to complex expressions and perform multi-browser testing when using them.

Using calc() in CSS is a handy way to do math right inside your stylesheets. It's especially useful when you need to mix different units or calculate widths, heights, margins, and more on the fly. Let me break down how it works and when you might want to use it.

Basic Syntax of calc()

The calc() function lets you perform basic math operations — addition, subtraction, multiplication, and division — directly in your CSS values. The syntax looks like this:

 width: calc(100% - 20px);

One thing to remember: always put spaces around the and - operators. Otherwise, it won't work. So this is correct:

 calc(100% - 20px)

But this won't work:

 calc(100%-20px)

You can use any valid CSS value inside calc() — pixels, percentages, ems, rems, viewport units, etc. That flexibility makes it super useful for responsive layouts.

Common Use Cases for calc()

There are a few situations where calc() really shines:

• Adjusting width with padding or borders
  If you want an element to be 100% wide but also have padding, using box-sizing: border-box usually handles that. But if you can't change the box model, calc() is a good alternative:

   .box {
    width: calc(100% - 20px); /* subtract left and right padding */
    padding: 0 10px;
  }

• Positioning elements dynamically
  You might want to center something but adjust based on another value. For example:

   .tooltip {
    left: calc(50% - 100px);
  }

• Mixing units
  This is one of the most powerful uses. Say you want font size to scale with viewport width but add a little extra:

   font-size: calc(1vw 10px);

These examples show how calc() helps avoid JavaScript or extra wrapper elements just to handle layout math.

Nesting calc() Functions

Yes, you can even nest calc() functions inside each other. It's not something you'll use every day, but it can come in handy when dealing with complex calculations.

Here's a contributed example:

 width: calc( (100% / 3) - calc(30px 1em) );

In practice, nesting gets hard to read fast, so keep it simple unless you really need it. Also, modern preprocessors like Sass or Less might make nested math easier to manage before it hits the browser.

Browser Support and Tips

Browser support for calc() is solid these days — all major browsers support it without issues. No need to worry about prefixes anymore.

A couple quick tips:

• Don't forget the spaces around and - .
• Use comments inside complex calc() expressions if needed, though CSS doesn't allow inline comments inside them.
• Test in multiple browsers if targeting older versions (like IE11), where some quirks exist.

If you're building responsive sites or doing anything dynamic with spacing or sizing, calc() is a great tool to keep in your CSS toolkit.

That's the basics of using calc() in CSS. Not too complicated once you get used to the syntax, but incredibly useful in real-world layouts.

The above is the detailed content of How to use the CSS calc() function tutorial. For more information, please follow other related articles on the PHP Chinese website!