توابع ریاضی در CSS
توابع ریاضی در CSS به شما این امکان را می‌دهند که از عبارات ریاضی به عنوان مقادیر ویژگی‌ها استفاده کنید. در اینجا به توابع calc(), max() و min() پرداخته می‌شود.
تابع calc()
تابع calc() محاسبه‌ای را انجام می‌دهد و نتیجه‌ی آن به عنوان مقدار ویژگی استفاده می‌شود.
سینتکس:
calc(expression)- expression: یک عبارت ریاضی است که نتیجه آن به عنوان مقدار ویژگی استفاده خواهد شد.
- عملگرهایی که می‌توان استفاده کرد:
+,-,*,/
مثال:
در این مثال از calc() برای محاسبه‌ی عرض یک عنصر <div> استفاده شده است:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}در اینجا عرض عنصر div بر اساس محاسبه‌ای بین درصد و پیکسل تعیین شده است.
تابع max()
تابع max() از بزرگترین مقدار در یک لیست جدا شده با ویرگول به عنوان مقدار ویژگی استفاده می‌کند.
سینتکس:
max(value1, value2, ...)- value1, value2, …: لیستی از مقادیر جدا شده با ویرگول که بزرگترین مقدار از بین آنها انتخاب می‌شود.
مثال:
در این مثال، عرض عنصر div به بزرگترین مقدار بین 50% و 300px تنظیم می‌شود:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}تابع min()
تابع min() از کوچکترین مقدار در یک لیست جدا شده با ویرگول به عنوان مقدار ویژگی استفاده می‌کند.
سینتکس:
min(value1, value2, ...)- value1, value2, …: لیستی از مقادیر جدا شده با ویرگول که کوچکترین مقدار از بین آنها انتخاب می‌شود.
مثال:
در این مثال، عرض عنصر div به کوچکترین مقدار بین 50% و 300px تنظیم می‌شود:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}نتیجه‌گیری
توابع ریاضی در CSS مانند calc(), max(), و min() ابزاری قدرتمند برای تعیین مقادیر پویا و تطبیق‌پذیر برای ویژگی‌ها هستند. این توابع به شما اجازه می‌دهند که به سادگی محاسبات پیچیده‌ای را انجام داده و بهترین مقدار ممکن را بر اساس شرایط مختلف انتخاب کنید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام