CSS的calc()函數(shù)通過支持加減乘除運(yùn)算，使佈局值更靈活。 ①它簡(jiǎn)化響應(yīng)式佈局，如width: calc(100% - 200px)可動(dòng)態(tài)計(jì)算寬度；②自動(dòng)處理混合單位，如px、%、em、rem、vw、vh，但需注意運(yùn)算符周圍空格；③適用於多種屬性，如top、left定位、網(wǎng)格/彈性盒間距、透明度或變換值；④兼容現(xiàn)代瀏覽器，適合創(chuàng)建智能自適應(yīng)佈局。

The calc() function in CSS is a handy tool that lets you perform math operations right inside your styles. It supports addition, subtraction, multiplication, and division, which makes it super useful when you need flexible layout values — like mixing percentages with fixed pixel sizes.

Why use calc() ?

A common reason to use calc() is to make responsive layouts easier. For example, you might want a box to take up 100% of the container width but subtract a fixed sidebar. Instead of hardcoding everything or using JavaScript, you can just write:

• width: calc(100% - 200px);

This tells the browser to calculate the width dynamically based on the current container size, minus 200 pixels for the sidebar. This kind of flexibility is where calc() really shines.

How does calc() work with different units?

One of the big advantages of calc() is that it handles mixed units automatically. You can combine px , % , em , rem , and even viewport units like vw or vh .

For example:

• margin-left: calc(50% - 10rem);
• font-size: calc(1rem 2vw);

These are especially helpful for fluid typography or centering elements based on dynamic measurements. Just remember: the spacing around operators matters. You must include spaces around , - , and don't need them for * or / .

So this works:
? calc(100% - 20px)

But this doesn't:
? calc(100%-20px)

Where else can you use calc() ?

You'll see calc() used in all sorts of properties — not just widths and heights. Some other places where it's helpful:

• Top / left positioning
  top: calc(50% - 25px); to vertically center an element that's 50px tall.

• Grid and flexbox gaps
  If you're building a grid and want spacing that adjusts based on screen size, calc() can help figure out item widths.

• Opacity or transform values
  Though less common, you can also use calc() for numeric values in transforms or opacity settings if they depend on other values.

It's supported in all modern browsers, so you don't have to worry about compatibility much these days.

That's basically how calc() works. It's not complicated, but it's powerful when you need to mix values or create smarter, more adaptive layouts.

以上是描述CSS中`calc（）`函數(shù)的使用的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！