آموزش توابع ریاضی calc و max و min در Css
امروز و در این مقاله قصد معرفی کامل آموزش توابع ریاضی calc و max و min در Css را داریم.
بله درست شنیدید… توابع!
این که سی اس اس یک زبان برنامه نویس نمیباشد، کاملا درست است. مانند HTML
اما دلیلی وجود ندارد که بخواهد کاربرانش را از تمام تکنیک های برنامه نویسی محروم کند.
برعکس در ویرایش های جدید، همواره قصد دارد که در حد امکان، خود را به ظاهر هم که شده، شبیه زبان برنامه نویسی کند و این یک امر فوق العاده میباشد.
در زیر میخواهیم به ۳ نوع از این توابع پراستفاده که در CSS3 معرفی شدند اشاره کنیم.
تابع calc در css
با استفاده از این تابع توانایی محاسبه های مختلف در پراپرتی هایی که نیاز به عدد برای مقادیر خود دارند را پیدا خواهید کرد.
بطور مثال شما میخواهید به width یک مقدار شرطی بدهید که ۵۰٪ صفحه بعلاوه ۲۰px را به اشغال خود در بیاورد.
و یا میخواهید بگویید ۳۰% صفحه منهای ۵۰px از آن را بعنوان مارجین استفاده کند. فقط کافیست کد های زیر را وارد نمایید.
width : calc(50% + 20px)
50٪ صفحه بعلاوه ۲۰px
margin : calc(30% – 50px)
30% صفحه منهای ۵۰px
تابع min و max در css
بصورت کلی میتوان این دو را شبیه هم و کاربردشان را متضاد هم دانست.
در قالب دو مثال توضیح میدهیم.
مثلا میخواهیم بگوییم المانی داریم که در حالت عادی عرض۶۰۰px دارد و در مینیموم حالت به ۱۰۰% خواهد رسید. کد زیر را بخوانید:
width: min(100%, 600px)
و برای max میتوانیم مثال بزنیم که المانی داریم در حالت عادی یا ماکزیمم، ۵۰٪ عرض و در حالت مینیمم ۳۰۰px باشد. کد زیر:
width: max(50%, 300px)
اگر سوال یا ابهامی دارید زیر همین پست مطرح کنید تا پاسخ داده شود و این مقاله کوتاه را با دوستانتان به اشتراک بگزارید♥ منبع
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
من یک دانشجوی برنامه نویسی هستم،
در کد نویسی ها دیده ام که بسیار از تابع calc استفاده می شود،
ولی یک مشکلی دارم:
گاهی هنگام استفاده از تابع calc ، مقادیر margin و padding را محاسبه کرد ، با هم جمع می کنند، و سپس ۲ برابر ان مقدار جمع شده را در تابع calc منها می کنند
ولی گاهی اوقات آن مقدار دو برابر نمی شود
یعنی margin هر عددی داشته باشد همان طور در تابع calc آن را می نویسند
و گاهی دیده ام حتی مقدار marging یا padding را تقسیم بر ۲ کرده و جواب حاصله را در calc می نویسند،
سلام.
عکس نمونه کد خود را در تلگرام بفرستید
09194723906