تابع ()calc در CSS

calc() Function

تابع ()calc در CSS اجازه می دهد تا عملیات محاسبه، بجای مقدار ثابت برای برخی از ویژگی ها استفاده شود.

نحوه نوشتار

.box {
   width: clac(100% - 50px);
}

در عملیات محاسبه میتوان از چهار عمل اصلی + ,-, / و * استفاده کرد.

در مثال زیر نحوه عملکرد این ویژگی را می بینیم:
(یکی از تکنیکهای استفاده از این تابع ایجاد عناصر تمام عرض داخل عنصر والد است که عرض مشخص دارد. در این مثال به این تکنیک می پردازیم.)

html

<section>
    <p>
        لورم ایپسوم یا طرح‌نما به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی
        و طراحی گرافیک گفته می‌شود.
    </p>
    <p class="full-width">
        لورم ایپسوم یا طرح‌نما به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی
        و طراحی گرافیک گفته می‌شود. لورم ایپسوم یا طرح‌نما به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود.
    </p>
    <p>
        لورم ایپسوم یا طرح‌نما به متنی آزمایشی و بی‌معنی در صنعت چاپ، صفحه‌آرایی
        و طراحی گرافیک گفته می‌شود.
    </p>
</section>

css

section {
    max-width: 500px;
    margin: 10px auto;
    border: 1px solid #333333;
    padding: 15px;
    direction: rtl;
    font: normal 16px calibri;
}
.full-width {
    font-size: 19px;
    background-color: #ff6347;
    color: #ffffff;
    padding: 20px 33%;
    margin: 0 calc(-50vw + 50%);
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این تابع CSS پشتیبانی می کنند.