Home esercizi css funzione calc

Esercizi Funzione Calc() CSS

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        margin-left: calc(50vw - 100px);
      }
    </style>
  </head>
  <body>
    <div>Questo è un div</div>
  </body>
</html>

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      p {
        font-size: calc(18px + 1em);
      }
    </style>
  </head>
  <body>
    <p>Questo è un paragrafo di testo.</p>
  </body>
</html>

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      ul {
        width: 400px;
        border: 1px solid black;
        padding: 0;
      }

      li {
        display: inline-block;
        width: calc(20% - 4px); /* 4px di margine tra gli elementi */
        text-align: center;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <li>Elemento 4</li>
      <li>Elemento 5</li>
    </ul>
  </body>
</html>

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      div {
        width: 300px;
        height: 200px;
        padding: calc(100px / 2);
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div>Questo è un div con padding</div>
  </body>
</html>

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      li {
        line-height: calc(1.5em * 2);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <!-- Aggiungi altri elementi <li> qui -->
    </ul>
  </body>
</html>

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      div {
        width: 400px;
        height: 100px;
        margin-top: calc(50vw - 200px);
      }
    </style>
  </head>
  <body>
    <div>Questo è un div</div>
  </body>
</html>

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      tr {
        height: calc(20px + 30px);
      }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Riga 1</td>
      </tr>
      <tr>
        <td>Riga 2</td>
      </tr>
      <tr>
        <td>Riga 3</td>
      </tr>
      <!-- Aggiungi altre righe <tr> qui -->
    </table>
  </body>
</html>

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      div {
        height: 300px;
        width: calc(300px * 2);
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div>Questo è un div</div>
  </body>
</html>

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      li {
        padding: calc(10px * 2);
      }
    </style>
  </head>
  <body>
    <ul>
      <li>Elemento 1</li>
      <li>Elemento 2</li>
      <li>Elemento 3</li>
      <!-- Aggiungi altri elementi <li> qui -->
    </ul>
  </body>
</html>

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.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      div {
        width: calc(400px + 200px);
        height: 200px;
        background-color: lightyellow;
      }
    </style>
  </head>
  <body>
    <div>Questo è un div</div>
  </body>
</html>