Μαθηματικές συναρτήσεις CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

Οι μαθηματικές συναρτήσεις CSS επιτρέπουν στις μαθηματικές εκφράσεις να είναι χρησιμοποιείται ως αξίες ακινήτων. Εδώ, θα εξηγήσουμε τα calc(), max() και min() συναρτήσεις.

Η συνάρτηση calc()

Η συνάρτηση calc() εκτελεί έναν υπολογισμό που θα χρησιμοποιηθεί ως τιμή ιδιότητας.

Σύνταξη CSS

calc(expression)
expression

Απαιτείται. Μια μαθηματική έκφραση. Το αποτέλεσμα θα χρησιμοποιηθεί ως τιμή.
Μπορούν να χρησιμοποιηθούν οι ακόλουθοι τελεστές: + - * /

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

Παράδειγμα

Χρησιμοποιήστε το calc() για να υπολογίσετε το πλάτος ενός στοιχείου <div>:

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}
</style>
</head>
<body>

<h1>The calc() Function</h1>

<p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>

<div id="div1">Some text...</div>

</body>
</html>

Η συνάρτηση max()

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

Σύνταξη CSS

 max(value1, value2, ...)
value1, value2, ...

Απαιτείται. Μια λίστα τιμών διαχωρισμένων με κόμμα - όπου βρίσκεται η μεγαλύτερη τιμή εκλεκτός

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

Παράδειγμα

Χρησιμοποιήστε τη max() για να ορίσετε το πλάτος του #div1 σε οποιαδήποτε τιμή είναι μεγαλύτερη, 50% ή 300 εικονοστοιχεία:

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}
</style>
</head>
<body>

<h1>The max() Function</h1>

<p>Use max() to set the width of #div1 to whichever value is largest, 50% or 300px:</p>

<div id="div1">Some text...</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

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

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

Σύνταξη CSS

 min(value1, value2, ...)
value1, value2, ...

Απαιτείται. Μια λίστα τιμών διαχωρισμένων με κόμμα - όπου βρίσκεται η μικρότερη τιμή εκλεκτός

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

Παράδειγμα

Χρησιμοποιήστε min() για να ορίσετε το πλάτος του #div1 σε οποιαδήποτε τιμή είναι μικρότερη, 50% ή 300 εικονοστοιχεία:

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}
</style>
</head>
<body>

<h1>The min() Function</h1>

<p>Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:</p>

<div id="div1">Some text...</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>

Όλες οι μαθηματικές συναρτήσεις CSS

calc()

Σας επιτρέπει να εκτελείτε υπολογισμούς για τον προσδιορισμό των τιμών των ιδιοτήτων CSS

max()

Χρησιμοποιεί τη μεγαλύτερη τιμή, από μια λίστα τιμών διαχωρισμένη με κόμμα, ως το αξία περιουσίας

min()

Χρησιμοποιεί τη μικρότερη τιμή, από μια λίστα τιμών διαχωρισμένη με κόμμα, ως το αξία περιουσίας