الوظائف الرياضية في CSS

تسمح وظائف الرياضيات في CSS باستخدام تعبيرات رياضية كقيم الخاصيات. سنتحدث في هذا الفصل عن calc()、max() و min() دالة.

دالة calc()

calc() تقوم الدالة calc() بحساب النتيجة وتستخدمها كقيمة الخاصية.

قواعد CSS

calc(expression)

لنرى مثالاً:

مثال

استخدام calc() حساب عرض عنصر <div>:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  لون الخلفية: yellow;
  padding: 5px;
}

جرب بنفسك

دالة max()

max() يستخدم الدالة max() أكبر قيمة من قائمة القيم المفصولة بالكومات كقيمة الخاصية.

قواعد CSS

max(القيمة1, القيمة2, ...)

لنرى مثالاً:

مثال

استخدام max() العرض المحدد لـ #div1 هو أكبر قيمة بين 50% و 300px:

#div1 {
  لون الخلفية: yellow;
  الارتفاع: 100px;
  width: max(50%, 300px);
}

جرب بنفسك

وظيفة min()

min() استخدام قائمة القيم المفصولة بالكومات للحصول على أصغر قيمة كقيمة الخاصية.

قواعد CSS

min(القيمة1, القيمة2, ...)

لنرى مثالاً:

مثال

استخدام min() عندما يحدد عرض #div1 إلى 50% أو 300px الأصغر

#div1 {
  لون الخلفية: yellow;
  الارتفاع: 100px;
  عرض: min(50%，300px);
}

جرب بنفسك

مرجع وظائف CSS

للحصول على قائمة كاملة بوظائف CSS، يرجى زيارة دليل وظائف CSS.