وظائف الرياضيات CSS
تسمح وظائف CSS الرياضية باستخدام التعبيرات الرياضية كقيم خصائص. هنا ، سوف نشرح calc()
،
max()
والوظائف min()
.
وظيفة calc ()
تقوم calc()
الوظيفة بعملية حسابية لاستخدامها كقيمة الخاصية.
بنية CSS
calc(expression)
Value | Description |
---|---|
expression | Required. A mathematical expression. The result will be used as the value. The following operators can be used: + - * / |
دعونا ننظر على سبيل المثال:
مثال
استخدم calc () لحساب عرض عنصر <div>:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
}
وظيفة max ()
تستخدم max()
الدالة أكبر قيمة ، من قائمة قيم مفصولة بفواصل ، كقيمة الخاصية.
بنية CSS
max(value1, value2, ...)
Value | Description |
---|---|
value1, value2, ... | Required. A list of comma-separated values - where the largest value is chosen |
دعونا ننظر على سبيل المثال:
مثال
استخدم max () لتعيين عرض # div1 إلى أيهما أكبر قيمة ، 50٪ أو 300 بكسل:
#div1 {
background-color: yellow;
height: 100px;
width: max(50%, 300px);
}
الدالة min ()
تستخدم min()
الدالة أصغر قيمة ، من قائمة قيم مفصولة بفواصل ، كقيمة الخاصية.
بنية CSS
min(value1, value2, ...)
Value | Description |
---|---|
value1, value2, ... | Required. A list of comma-separated values - where the smallest value is chosen |
دعونا ننظر على سبيل المثال:
مثال
استخدم min () لتعيين عرض # div1 إلى أي قيمة أصغر ، 50٪ أو 300 بكسل:
#div1 {
background-color: yellow;
height: 100px;
width: min(50%, 300px);
}
جميع وظائف الرياضيات في CSS
Function | Description |
---|---|
calc() | Allows you to perform calculations to determine CSS property values |
max() | Uses the largest value, from a comma-separated list of values, as the property value |
min() | Uses the smallest value, from a comma-separated list of values, as the property value |