IL MODELLO A BOX NEI CSS - MARCO ALBASINI

BOX MODEL

Introduciamo l’argomento “Il modello a box nei CSS” dicendo che tutto in CSS è circondato da un box (scatola) e la comprensione di questi riquadri è la chiave per poter creare layout con i CSS o per allineare elementi con altri elementi. In questa lezione daremo un’occhiata adeguata al CSS Box Model in modo da poter creare attività di layout più complesse con una comprensione di come funziona e della terminologia ad esso correlata.

SPIEGAZIONE DEL BOX MODEL

Spiegazione delle diverse parti:

Content – Il contenuto del box, dove appaiono testo e immagini
Padding – È un’area intorno al contenuto. L’imbottitura è trasparente
Border – Un bordo che circonda l’imbottitura e il contenuto
Margin – È un’area al di fuori del bordo. Il margine è trasparente

Il modello a box ci consente di aggiungere un bordo attorno agli elementi e di definire lo spazio tra gli elementi.

LARGHEZZA E ALTEZZA DI UN ELEMENTO (WIDTH AND HEIGHT)

Per impostare correttamente la larghezza e l’altezza di un elemento in tutti i browser, è necessario conoscere il funzionamento del modello a box.

Importante: quando si impostano le proprietà di larghezza e altezza di un elemento con CSS, è sufficiente impostare la larghezza e l’altezza dell’area del contenuto. Per calcolare la dimensione completa di un elemento, è necessario aggiungere anche padding, bordi e margini.

La larghezza totale di un elemento dovrebbe essere calcolata in questo modo:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

L’altezza totale di un elemento dovrebbe essere calcolata in questo modo:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

BORDI CSS

Le proprietà dei bordi CSS ci consentono di specificare lo stile, la larghezza e il colore del bordo di un elemento. La proprietà border-style specifica il tipo di bordo da visualizzare. Sono ammessi i seguenti valori:

dotted – Definisce un bordo punteggiato
dashed – Definisce un bordo tratteggiato
solid – Definisce un bordo solido
double – Definisce un doppio bordo
groove – Definisce un bordo scanalato 3D. L’effetto dipende dal valore del colore del bordo
ridge – Definisce un bordo increspato 3D. L’effetto dipende dal valore del colore del bordo
inset – Definisce un bordo 3D. L’effetto dipende dal valore del colore del bordo
outset – Definisce un bordo esterno 3D. L’effetto dipende dal valore del colore del bordo
none – Nessun bordo
hidden – Definisce un bordo nascosto

La proprietà border-style può avere da uno a quattro valori (per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro).

LARGHEZZA DEL BORDO (CSS BORDER WIDTH)

La proprietà border-width specifica la larghezza dei quattro bordi. La larghezza può essere impostata come una dimensione specifica (in px, pt, cm, em, ecc.) o utilizzando uno dei tre valori predefiniti: thin, medium, or thick. La proprietà border-width può avere da uno a quattro valori (per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro):

COLORE DEI BORDI (CSS BORDER COLOR)

La proprietà border-color viene utilizzata per impostare il colore dei quattro bordi.

Il colore può essere impostato da:

nome – specifica un nome di colore, come “red”
HEX – specifica un valore HEX, come “#ff0000”
RGB: specifica un valore RGB, come “rgb(255,0,0)”
HSL – specifica un valore HSL, come “hsl(0, 100%, 50%)”
trasparente

Nota: se il colore del bordo non è impostato, eredita il colore dell’elemento.

La proprietà border-color può avere da uno a quattro valori (per il bordo superiore, il bordo destro, il bordo inferiore e il bordo sinistro).

LATI DEI BORDI CSS

Nei CSS ci sono anche proprietà per specificare ciascuno dei bordi (superiore, destro, inferiore e sinistro).

Se la proprietà border-style ha quattro valori:

border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed

Se la proprietà border-style ha tre valori:

border-style: dotted solid double;
- top border is dotted
- right and left borders are solid
- bottom border is double

Se la proprietà border-style ha due valori:

border-style: dotted solid;
- top and bottom borders are dotted
- right and left borders are solid

Se la proprietà border-style ha un valore:

border-style: dotted;
- tutti i bordi sono dotted

BORDI ARROTONDATI CSS (ROUNDED BORDERED)

La proprietà border-radius viene utilizzata per aggiungere bordi arrotondati a un elemento.

MARGINI

I margini vengono utilizzati per creare spazio attorno agli elementi, al di fuori di qualsiasi bordo definito. CSS ha proprietà per specificare il margine per ogni lato di un elemento:

margin-top
margin-right
margin-bottom
margin-left

Tutte le proprietà dei margini possono avere i seguenti valori:

auto – il browser calcola il margine
length – specifica un margine in px, pt, cm, ecc.
% – specifica un margine in % della larghezza dell’elemento contenitore
inherit – specifica che il margine deve essere ereditato dall’elemento genitore

Suggerimento: sono consentiti valori negativi.

Per abbreviare il codice, è possibile specificare tutte le proprietà del margine in una proprietà. La proprietà margin è una proprietà abbreviata per le seguenti proprietà margin individuali:

margin-top
margin-right
margin-bottom
margin-left

Se la proprietà margin ha quattro valori:
- margin: 25px 50px 75px 100px;
  - top margin is 25px
  - right margin is 50px
  - bottom margin is 75px
  - left margin is 100px

Se la proprietà margin ha tre valori:
- margin: 25px 50px 75px;
  - top margin is 25px
  - right and left margins are 50px
  - bottom margin is 75px

Se la proprietà margin ha due valori:
- margin: 25px 50px;
  - top and bottom margins are 25px
  - right and left margins are 50px

Se la proprietà margin ha un solo valore
- margin: 25px;
  - Tutti i margini sono 25px.

PADDING

Il riempimento viene utilizzato per creare spazio attorno al contenuto di un elemento, all’interno di qualsiasi bordo definito. Con CSS, hai il pieno controllo del padding. Esistono proprietà per impostare il riempimento per ciascun lato di un elemento (superiore, destro, inferiore e sinistro).

padding-top
padding-right
padding-bottom
padding-left

Tutte le proprietà del padding possono avere i seguenti valori:

Length – specifica un’imbottitura in px, pt, cm, ecc.
% – specifica un riempimento in % della larghezza dell’elemento contenitore
inherit – specifica che il padding deve essere ereditato dall’elemento genitore

Nota: i valori negativi non sono consentiti.

Per abbreviare il codice, è possibile specificare tutte le proprietà del padding in una proprietà. È una proprietà abbreviata per le seguenti proprietà padding individuali:

padding-top
padding-right
padding-bottom
padding-left

Quindi, ecco come funziona:

Se la proprietà padding ha quattro valori:

padding: 25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px

Se la proprietà padding ha tre valori:

padding: 25px 50px 75px;
- top padding is 25px
- right and left paddings are 50px
- bottom padding is 75px

Se la proprietà padding ha due valori:

padding: 25px 50px;
- top and bottom paddings are 25px
- right and left paddings are 50px

Se la proprietà padding ha un valore:

padding: 25px;
- tutti i paddings sono 25px

PROPRIETA’ WIDTH

La proprietà width CSS specifica la larghezza dell’area del contenuto dell’elemento. L’area del contenuto è la porzione all’interno del padding, del bordo e del margine di un elemento (il box model). Quindi, se un elemento ha una larghezza specificata, il riempimento aggiunto a quell’elemento verrà aggiunto alla larghezza totale dell’elemento. Questo è spesso un risultato indesiderato. Si può usare la proprietà box-sizing. Ciò fa sì che l’elemento mantenga la sua larghezza effettiva; se si aumenta il riempimento, lo spazio disponibile per i contenuti diminuirà. Nel codice ci son esempi sulla proprietà box-sizing.

ALTEZZA E LARGHEZZA (HEIGHT AND WIDTH)

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>BORDI CSS</title>
    
</head>
<body>
    <h1>BORDI CSS</h1>
    <h2>Border Style</h2>
    <div class="div1">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
           Natus quasi, illum tempore officiis obcaecati nisi asperiores 
           quam exercitationem nobis, pariatur, quibusdam deleniti cupiditate. 
           Aperiam atque hic quis in voluptate iure?</p>
    </div>
    <br>
    <h2>Border Width</h2>
        <p class="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
           Natus quasi, illum tempore officiis obcaecati nisi asperiores 
           quam exercitationem nobis, pariatur, quibusdam deleniti cupiditate. 
           Aperiam atque hic quis in voluptate iure?
        </p>
        <hr>
        <p class="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
            Natus quasi, illum tempore officiis obcaecati nisi asperiores 
            quam exercitationem nobis, pariatur, quibusdam deleniti cupiditate. 
            Aperiam atque hic quis in voluptate iure?
         </p>
         <p class="three">
             testo di esempio
         </p>

</body>
</html>

Copy to Clipboard

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>MARGINI</title>
    
</head>
<body>
    <h1>MARGINI E PADDING</h1>
    <div class="uno">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Quo, fugit? Numquam quibusdam, facilis laboriosam deleniti 
            ullam architecto, molestias sunt sint ut quae laudantium illo eligendi 
            at, corporis eaque culpa odit.
        </p>
    </div>
    <div class="due">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. 
            Quo, fugit? Numquam quibusdam, facilis laboriosam deleniti 
            ullam architecto, molestias sunt sint ut quae laudantium illo eligendi 
            at, corporis eaque culpa odit.
        </p>
    </div>
    <hr>
    <h2>Padding</h2>
    <p id="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
               Excepturi, corporis sit, deleniti voluptatibus odio ratione 
               voluptatum exercitationem animi, itaque sapiente ab sed quaerat 
               iusto quos dolorum numquam vel laudantium. Aspernatur.
    </p>
    <h2>Box sizing</h2>
    <hr>
    <p>
        La proprietà box-sizing CSS ci consente di includere il padding 
        e il bordo nella larghezza e altezza totali di un elemento.Per impostazione predefinita, 
        la larghezza e l'altezza di un elemento vengono calcolate in questo modo:

larghezza + imbottitura + bordo = larghezza effettiva di un elemento
        altezza + imbottitura + bordo = altezza effettiva di un elemento
        
        Ciò significa: quando si imposta la larghezza/altezza di un elemento, 
        l'elemento spesso appare più grande di quanto è stato impostato 
        (perché il bordo dell'elemento e il riempimento vengono aggiunti 
        alla larghezza/altezza specificata dell'elemento).Dal momento che il risultato 
        dell'utilizzo del box-sizing: border-box; è molto meglio, molti sviluppatori 
        vogliono che tutti gli elementi delle loro pagine funzionino in questo modo.

* {
            box-sizing: border-box;
          }
    </p>

<h2>Senza box-sizing</h2>

<div class="uno">Questo div è più piccolo (la larghezza è 300 px e l'altezza è 100 px).</div>
    <br>
    <div class="due">Questo div è più grande (la larghezza è 300 px e l'altezza è 100 px).</div>

<h2>Con box-sizing</h2>
    <hr>
    <div class="tre">Questo div è ok.</div>
    <br>
    <div class="quattro">Questo div è ok.</div>
</body>
</html>

Copy to Clipboard

h1{
    border:3px solid #e9c46a;
    border-radius: 15px;
    text-align: center;
    background-color: #457b9d;
    color: darkred;
}
.div1{
    border-style: solid dashed dotted double;
    border-width: 5px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size:medium;
}
.one{
    border-style: solid;
    border-width: 5px 20px; /* 5px top e bottom, 20px left e right */
}
.two{
    border-style: solid;
    border-width: 20px 5px; /* 20px top  bottom, 5px left e right */
    border-color: #ffba08 #d00000 #e85d04 #fb8500;
    background-color: #adb5bd;
    color:black;
}
.three{
    border-left: 6px solid red;
    background-color: lightgrey;
    color:black;
}
.uno{
    border: 5px solid #fca311;
    margin: 25px 25px 100px 25px;
}
.due{
    border: 5px solid #343a40
}
#p1{
  background-color: chartreuse;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  padding: 50px 25px 50px 25px;/*--top right bottom left*/
  border:3px solid #b56576
}
.uno{
    width: 300px;
    height: 100px;
    border: 1px solid blue;
}
.due{
    width: 300px;
    height: 100px;  
    padding: 50px;
    border: 1px solid red;
}
.tre{
    width: 300px;
    height: 100px;
    border: 1px solid blue;
    box-sizing: border-box;
}
.quattro{
    width: 300px;
    height: 100px;  
    padding: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}

LINK AI POST PRECEDENTI

PREVIOUS POST LINKS

LINK AL CODICE SU GITHUB

GITHUB

COMPRENDERE IL BOX MODEL NEI CSS

BOX MODEL

SPIEGAZIONE DEL BOX MODEL

LARGHEZZA E ALTEZZA DI UN ELEMENTO (WIDTH AND HEIGHT)

LARGHEZZA DEL BORDO (CSS BORDER WIDTH)

COLORE DEI BORDI (CSS BORDER COLOR)

LATI DEI BORDI CSS

MARGINI

PADDING

PROPRIETA’ WIDTH

ALTEZZA E LARGHEZZA (HEIGHT AND WIDTH)

LINK AI POST PRECEDENTI

LINK AL CODICE SU GITHUB

Scritto da: Marco Albasini

Scrivi un commento Annulla risposta

Categories

Archive

COMPRENDERE IL BOX MODEL NEI CSS

COMPRENDERE IL BOX MODEL NEI CSS

BOX MODEL

SPIEGAZIONE DEL BOX MODEL

LARGHEZZA E ALTEZZA DI UN ELEMENTO (WIDTH AND HEIGHT)

LARGHEZZA DEL BORDO (CSS BORDER WIDTH)

COLORE DEI BORDI (CSS BORDER COLOR)

LATI DEI BORDI CSS

MARGINI

PADDING

PROPRIETA’ WIDTH

ALTEZZA E LARGHEZZA (HEIGHT AND WIDTH)

LINK AI POST PRECEDENTI

LINK AL CODICE SU GITHUB

Scritto da: Marco Albasini

Post correlati

SELETTORI SEMPLICI IN CSS

ALTRI SELETTORI CSS

I COLORI IN CSS

IL POSIZIONAMENTO CON I CSS

I FLEXBOX CON I CSS

QUERY MULTIMEDIALI – MEDIA QUERIES

CSS FONTS

Scrivi un commento Annulla risposta

Categories

Archive