CSS چند تابع ریاضی داخلی داره که می‌تونیم باهاش‌ها محاسبات انجام بدیم و مقادیر رو به شکل داینامیک تعیین کنیم.

🔹 1. calc()

برای محاسبه مقدارها. می‌تونیم واحدهای مختلف رو با هم ترکیب کنیم.

div {
  width: calc(100% - 50px);
  height: calc(50vh - 20px);
}

✅ یعنی: عرض المنت برابر با کل عرض صفحه منهای ۵۰ پیکسل.

🔹 2. min()

کمترین مقدار رو برمی‌گردونه.

div {
  width: min(80%, 400px);
}

✅ یعنی: عرض المنت همیشه یا ۸۰٪ صفحه باشه یا نهایتاً ۴۰۰px (هر کدوم کمتر بود).

🔹 3. max()

بیشترین مقدار رو برمی‌گردونه.

div {
  width: max(50%, 300px);
}

✅ یعنی: عرض المنت همیشه حداقل ۵۰٪ باشه، ولی کمتر از ۳۰۰px نشه.

🔹 4. clamp()

یه مقدار رو بین حداقل و حداکثر محدود می‌کنه. خیلی کاربردی برای فونت ریسپانسیو.

p {
  font-size: clamp(16px, 2vw, 24px);
}

✅ یعنی: سایز فونت هیچ‌وقت از ۱۶px کمتر و از ۲۴px بیشتر نشه، اما وسطش بسته به 2vw (عرض صفحه) تغییر کنه.

🔹 ترکیب توابع

می‌تونیم توابع رو ترکیب کنیم:

div {
  height: calc(100vh - max(50px, 10%));
}

🔹 جدول خلاصه