Scopri come semplificare i calcoli e le operazioni matematiche all’interno delle regole CSS con la funzione “calc()“. Pratica l’utilizzo di “calc()” per calcolare dimensioni e posizioni degli elementi in modo più efficiente.
Esercizio 1
Crea una pagina HTML con un div che abbia larghezza di 200px e altezza di 100px. Utilizza la funzione calc() per impostare il margine sinistro del div in modo che sia posizionato a metà della larghezza della finestra del browser.
Esercizio 2
Crea una pagina HTML con un paragrafo di testo. Utilizza la funzione calc() per impostare la dimensione del testo in modo che sia 18px più grande del valore di base.
Esercizio 3
Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Utilizza la funzione calc() per impostare la larghezza di ogni elemento in modo che occupi il 20% della larghezza della lista.
Esercizio 4
Crea una pagina HTML con un div che abbia larghezza di 300px e altezza di 200px. Utilizza la funzione calc() per impostare il padding del div in modo che sia uguale alla metà dell'altezza.
Esercizio 5
Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Utilizza la funzione calc() per impostare l'altezza di ogni elemento in modo che sia il doppio del valore di base.
Esercizio 6
Crea una pagina HTML con un div che abbia larghezza di 400px e altezza di 100px. Utilizza la funzione calc() per impostare il margine superiore del div in modo che sia posizionato a metà della larghezza della finestra del browser.
Esercizio 7
Crea una pagina HTML con una tabella contenente diverse righe. Utilizza la funzione calc() per impostare l'altezza di ogni riga in modo che sia 30px più grande del valore di base.
Esercizio 8
Crea una pagina HTML con un div che abbia larghezza di 500px e altezza di 300px. Utilizza la funzione calc() per impostare la larghezza del div in modo che sia il doppio dell'altezza.
Esercizio 9
Crea una pagina HTML con una lista non ordinata contenente diversi elementi. Utilizza la funzione calc() per impostare il padding di ogni elemento in modo che sia il doppio del valore di base.
Esercizio 10
Crea una pagina HTML con un div che abbia larghezza di 600px e altezza di 200px. Utilizza la funzione calc() per impostare la larghezza del div in modo che sia la somma della larghezza e dell'altezza.