CSS的calc()函數允許在樣式表中直接進行數學運算，其基本語法包括加減乘除四種操作，并要求在使用 和-運算符時添加空格。主要用途包括：1. 在不更改盒模型的情況下調整寬度（如扣除內邊距）；2. 動態(tài)定位元素（如基于百分比居中并微調位置）；3. 混合不同單位進行計算（例如結合視口單位和像素）。此外，calc()支持嵌套使用，但應避免過度復雜以保持可讀性。瀏覽器兼容性良好，無需添加前綴，但在處理舊版瀏覽器（如IE11）時需注意潛在問題。使用時建議為復雜的表達式添加注釋并進行多瀏覽器測試。

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 contrived 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.

以上是如何使用CSS calc（）函數教程的詳細內容。更多信息請關注PHP中文網其他相關文章！