آموزش تابع های ریاضی در CSS

تابع های ریاضی CSS به ما امکان می دهند تا از عبارات ریاضی بعنوان مقادیر ویژگی ها استفاده کنیم. در اینجا، ما از تابع های calc() و min() و max() استفاده می کنیم.

بررسی تابع calc() در CSS

تابع calc() یک محاسبه را انجام می دهد که بعنوان مقدار یک ویژگی مورد استفاده قرار می گیرد.

سینتکس این تابع در CSS

calc(expression)

به مثال زیر توجه کنید:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

بررسی تابع max() در CSS

تابع max() از یک لیست مقادیر که با کاما از یکدیگر جدا شده اند، بزرگترین مقدار را بعنوان مقداری برای یک ویژگی(property)، برمی گرداند.

سینتکس این تابع در CSS

 max(value1, value2, ...)

به مثال زیر توجه کنید:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

بررسی تابع min() در CSS

تابع min() از یک لیست مقادیر که با کاما از یکدیگر جدا شده اند، کوچکترین مقدار را بعنوان مقداری برای یک ویژگی(property) انتخاب می کند.

سینتکس این تابع در css

min(value1, value2, ...)

به مثال زیر توجه کنید:

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}