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 پشتیبانی می کنند.