Μαθηματικές Φункциές CSS

CSS mathematical functions allow the use of mathematical expressions as attribute values. This chapter will explain calc(),max() And min() Function.

calc() function

calc() The function performs the calculation and uses the result as the attribute value.

Γλώσσα Γραμματοσειράς CSS

calc(expression)

Ας δούμε ένα παράδειγμα:

Παράδειγμα

Χρήση calc() Calculate the width of the <div> element:

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

Δοκιμάστε το個人

max() function

max() The function uses the largest value from the list of comma-separated values as the attribute value.

Γλώσσα Γραμματοσειράς CSS

max(value1, value2, ...)

Ας δούμε ένα παράδειγμα:

Παράδειγμα

Χρήση max() Set the width of #div1 to the larger value between 50% or 300px:

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

Δοκιμάστε το個人

Συνάρτηση min()

min() Η συνάρτηση min() χρησιμοποιεί την μικρότερη τιμή από τη λίστα τιμών που διαχωρίζονται με κόμματα ως τιμή του χαρακτηριστικού.

Γλώσσα Γραμματοσειράς CSS

min(value1, value2, ...)

Ας δούμε ένα παράδειγμα:

Παράδειγμα

Χρήση min() Αναθέστε το πλάτος του #div1 σε 50% ή το μικρότερο από 300px:

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

Δοκιμάστε το個人

CSS συνάρτηση αναφοράς

Για να δείτε την πλήρη λίστα των συνάρτησης CSS, επισκεφθείτε τον Εγχειρίδιο συνάρτησης CSS。