آموزش تابع calc در CSS

تابع calc() در CSS یکی از مهم‌ترین ابزارها برای انجام محاسبات ریاضی بر روی طول، عرض، ارتفاع و سایر ویژگی‌ها است. با استفاده از این تابع می‌توانید واحدهای مختلف را ترکیب کنید و طراحی‌های responsive و منعطف ایجاد کنید. برای یادگیری حرفه‌ای CSS و مثال‌های عملی، حتماً به دوره آموزش CSS مراجعه کنید.

ساختار تابع calc()

ساختار کلی تابع calc() به صورت زیر است:

calc(expression)

که expression می‌تواند شامل جمع (+)، تفریق (-)، ضرب (*) و تقسیم (/) با واحدهای CSS مانند px, %, em و rem باشد.

مثال‌های عملی تابع calc()

نمونه‌های کاربرد تابع calc در CSS:

.box {
    width: calc(100% - 20px);
    height: calc(50vh - 10px);
    margin-left: calc(10px + 2%);
}

ترکیب با دیگر واحدها:

.container {
    padding: calc(1em + 5px);
    font-size: calc(12px + 0.5vw);
}

جدول پارامترها و توضیحات

ویژگی	توضیح
expression	عبارتی ریاضی شامل واحدهای CSS و عملیات جمع، تفریق، ضرب و تقسیم
واحدها	px, %, em, rem, vw, vh و سایر واحدهای CSS