Funzioni matematiche in CSS
CSS supporta varie funzioni matematiche che possono essere utilizzate per scegliere un valore della proprietà facendo alcuni calcoli matematici. L'uso primario delle funzioni matematiche è ottenere i valori più alti o più bassi dai valori passati alla funzione specifica. I simboli matematici come -, +, /e * possono essere applicati a più valori per ottenere un nuovo valore per quella proprietà. Questo post dimostra l'uso delle funzioni matematiche in CSS. Mantenendo le cose specifiche, questa guida serve i risultati di seguito:
- Come utilizzare la funzione calc () in CSS
- Come utilizzare la funzione min () in CSS
- Come utilizzare la funzione max () in CSS
Funzioni matematiche in CSS
Questa parte fondamentale della guida fornisce il funzionamento e l'utilizzo di varie funzioni matematiche in CSS. Ogni funzione matematica verrebbe descritta in dettaglio con l'aiuto di un esempio
Come utilizzare la funzione calc ()
Il calc () è una funzione matematica che esegue alcuni calcoli matematici sui valori per ottenere un nuovo valore della proprietà specifica.
Calc (espressione)IL espressione Nella sintassi di cui sopra si riferisce all'espressione matematica (valori uniti a +, -, * ecc.).
Esempio
Il codice fornito di seguito pratichi la funzione calc () su un set di valori per ottenere un nuovo valore della proprietà specifica.
Html
La funzione calc () viene utilizzata per impostare la larghezza
CSS
La funzione calc () viene applicata sulla proprietà di larghezza che aggiunge "300px" e "20%" Per ottenere il nuovo valore di larghezza.
Produzione
L'output mostra che la larghezza del paragrafo è stata estesa alla somma di "300px" e "20%".
Come usare la funzione min ()
La funzione min () restituisce il valore minimo e tale valore viene utilizzato per quella specifica proprietà CSS. La seguente sintassi viene utilizzata dalla funzione min ()
min (Val1, Val2, Val3, ...)La funzione min () confronta Val1, Val2 e Val3 per ottenere il valore minimo.
Esempio
Questo esempio utilizza la funzione min () per ottenere il valore minimo tra quello passato.
Html
La funzione min () viene utilizzata per impostare l'altezza/larghezza
Il codice HTML sopra contiene un paragrafo che verrà utilizzato in CSS per applicare la funzione min ().
CSS
Il codice CSS sopra utilizza la funzione min () sulla larghezza e sull'altezza dell'elemento di paragrafo. I valori per la larghezza sono in "Percentuale (%)" e "pollici (in)" mentre i valori per l'altezza sono in "PT" e "PX".
Produzione
Dall'output, si osserva che la funzione min () ha impostato l'altezza su "50pt" e larghezza a "4 pollch" poiché erano i valori minimi.
Come utilizzare la funzione max ()
Il max () confronta i valori multipli e sceglie il valore massimo dai valori di input. La sintassi della funzione max () è fornita di seguito:
max (Val1, Val2, Val3, ...)Val1, Val2 e Val3 si riferiscono ai valori che vengono passati alla funzione max ().
Esempio
Il codice seguente pratica la funzione matematica max () in CSS.
Html
La funzione max () viene utilizzata per impostare l'imbottitura e l'opacità
CSS
Nel CSS sopra, l'imbottitura, l'opacità e la larghezza sono usati con la funzione max (). Dopo aver confrontato i valori, la funzione max () selezionerà la "10pt" per l'imbottitura, "50%" per opacità e larghezza.
Produzione
L'output mostra che la funzione max () ha scelto i valori massimi di opacità, larghezza e imbottitura.
Conclusione
Le funzioni matematiche in CSS vengono utilizzate per scegliere o generare un valore per una proprietà CSS specifica. La funzione calc () esegue un'espressione matematica sull'insieme di valori e genera un nuovo valore. Contrariamente a questo, le funzioni min () e max () scelgono rispettivamente i valori minimi e massimi (dai valori di input). Questo articolo fornisce l'uso delle funzioni matematiche in CSS. Queste funzioni matematiche aiutano a scegliere i diversi valori per scenari diversi.