این آموزش در تاریخ ۱۴۰۰/۱۰/۱۹ آپدیت شده است.
آموزش تابع calc در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تابع calc در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تابع calc در CSS
با استفاده از تابع calc در CSS میتوان مقادیر برخی از ویژگی های CSS را با استفاده از عبارات ریاضی ( عملگرها ) یی مثه جمع، منها ، ضرب و تقسیم محاسبه و مقداردهی کرد.
| نسخه | CSS2 |
|---|
Free-Learn
مثال از تابع calc در CSS
در ادامه میتوانید یک مثال از این تابع را در زبان CSS مشاهده نمایید.
مثال شماره ۱ : محاسبه اندازه عرض تگ با استفاده از تابع Calc ( گفتیم ۱۰۰درصد تقسیم بر ۲ بشه ) پس باید در خروجی اون تگ اندازه عرضش بشه ۵۰درصد
|
1 2 3 |
.MyBox { width:calc(100% / 2); } |
مثال شماره ۲ : استفاده از عمل جمع برای محاسبه اندازه Padding
|
1 2 3 |
.MyBox { padding:calc(5px + 5px); } |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تابع calc در CSS پشتیبانی میکنند یا خیر.
| نام تابع | Chrome | Firefox | Opera | Safari | Edge |
| ()calc | ۲۶ | ۱۶ | ۱۵ | بله | بله |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این تابع در CSS بصورت زیر می باشد.
|
1 |
calc( Expression ); |
Free-Learn
جدول مقادیر تابع calc در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این تابع استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| Expression | ضروری – اون عبارت های ریاضی که میشه استفاده کرد * ( ضرب ) و – ( منها / تفریق ) و + ( جمع ) و / ( تقسیم ) |
Free-Learn
نکات و توضیحات
- از این تابع میتوان در تمامی ویژگی هایی که قابلیت محاسبه دارند ( یعنی اونایی که قراره اندازه ای یا مقدار عددی براشون مشخص شود ) استفاده کرد، ویژگی هایی همچون :
- Width
- Height
- Background-Size
- Background-Position
- Padding
- Margin
- Z-Index
