CSS Mathematical Functions

Ang CSS matematikal na function ay nagpapahintulot na gamitin ang matematikal na ekspresyon bilang halaga ng attribute. Ang kabanata na ito ay magtuturo sa: calc(),max() At min() Function.

calc() function

calc() Ang function ay gaganapin ang pagkalkula at magamit ang resulta bilang halaga ng attribute.

CSS Syntax

calc(expression)

Let's see an example:

Example

Use calc() Tinuturing ang laki ng <div> element:

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

Try It Yourself

max() function

max() Ang function ay gumagamit ng pinakamalaking halaga mula sa listahan ng halaga na hinahati ng komma bilang halaga ng attribute.

CSS Syntax

max(value1, value2, ...)

Let's see an example:

Example

Use max() Mgaadala ang laki ng #div1 sa pinakamalaki sa 50% o 300px:

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

Try It Yourself

min() Function

min() The min() function uses the smallest value from a comma-separated list of values as the attribute value.

CSS Syntax

min(value1, value2, ...)

Let's see an example:

Example

Use min() Set the width of #div1 to 50% or the smaller value of 300px:

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

Try It Yourself

CSS Function Reference

For a complete list of all CSS functions, please visit our CSS Function Reference Manual.