Proprietà CSS relative al modello a scatola

Articles

Questo articolo spiega le proprietà CSS relative al modello a scatola.

Puoi apprendere i casi d'uso e la sintassi per proprietà come larghezza, altezza e margine.

YouTube Video

HTML per Anteprima

css-box.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>Box Model Related CSS Properties</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-box.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Box Model Related CSS Properties</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Box Model Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>width and height</h3>
 23            <section>
 24                <header><h4>width: 250px; height: 150px;</h4></header>
 25                <section class="sample-view">
 26                    <div class="width-height-fixed">Fixed size(250px,150px)</div>
 27                </section>
 28            </section>
 29            <section>
 30                <header><h4>width: 50%; height: 50%;</h4></header>
 31                <section class="sample-view">
 32                    <div class="width-height-percent">Percentage size(50%,50%)</div>
 33                </section>
 34            </section>
 35            <section>
 36                <header><h4>width: min-content; height: min-content;</h4></header>
 37                <section class="sample-view">
 38                    <div class="width-height-min-content">This is an example of min-content.</div>
 39                </section>
 40            </section>
 41            <section>
 42                <header><h4>width: max-content; height: max-content;</h4></header>
 43                <section class="sample-view">
 44                    <div class="width-height-max-content">This is an example of max-content.</div>
 45                </section>
 46            </section>
 47            <section>
 48                <header><h4>width: fit-content; max-width: 150px;</h4></header>
 49                <section class="sample-view">
 50                    <div class="width-height-fit-content">This is an example of fit-content.</div>
 51                </section>
 52            </section>
 53        </article>
 54        <article>
 55            <h3>margin and padding</h3>
 56            <section style="height: auto;">
 57                <h4>Margin &amp; padding</h4>
 58                <header><h4>margin: 20px; padding: 15px;</h4></header>
 59                <section class="sample-view">
 60                    <div class="margin-padding">margin & padding</div>
 61                </section>
 62            </section>
 63            <section style="height: auto;">
 64                <h4>Margin only(no padding)</h4>
 65                <header><h4>margin: 20px; padding: 0;</h4></header>
 66                <section class="sample-view">
 67                    <div class="margin-only">margin only</div>
 68                </section>
 69            </section>
 70            <section style="height: auto;">
 71                <h4>No margin &amp; padding example</h4>
 72                <header><h4>margin: 0; padding: 0;</h4></header>
 73                <section class="sample-view">
 74                    <div class="no-margin">no margin & padding</div>
 75                </section>
 76            </section>
 77        </article>
 78        <article>
 79            <h3>box-sizing</h3>
 80            <section style="height: auto;">
 81                <header><h4>box-sizing: content-box</h4></header>
 82                <section class="sample-view">
 83                    <div style="width: 300px;">width: 300px</div>
 84                    <div class="content-box">Content Box</div>
 85                    <div style="width: 360px;">width: 360px</div>
 86                </section>
 87            </section>
 88            <section>
 89                <header><h4>box-sizing: border-box</h4></header>
 90                <section class="sample-view">
 91                    <div style="width: 300px;">width: 300px</div>
 92                    <div class="border-box">Border Box</div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>visibility</h3>
 98            <section>
 99                <header><h4>visibility: visible</h4></header>
100                <section class="sample-view">
101                    <div class="visibility-visible">Visible Box</div>
102                </section>
103                <header><h4>visibility: hidden</h4></header>
104                <section class="sample-view">
105                    <div class="visibility-hidden">Hidden Box</div>
106                </section>
107                <header><h4>visibility: collapse</h4></header>
108                <section class="sample-view">
109                    <div class="visibility-collapse">Collapsed Box (Hold layout space)</div>
110                </section>
111                <header><h4>HTML</h4></header>
112                <pre>&lt;div class="visibility-collapse"&gt;Collapsed Box (Hold layout space)&lt;/div&gt;</pre>
113                <header><h4>visibility: collapse</h4></header>
114                <section class="sample-view">
115                    <table style="height: 200px; margin: auto;">
116                        <tr class="visibility-collapse">
117                            <td>Cell 1 (Remove layout space)</td>
118                        </tr>
119                        <tr>
120                            <td>Cell 2</td>
121                        </tr>
122                    </table>
123                </section>
124                <header><h4>HTML</h4></header>
125<pre>
126&lt;table style="height: 200px; margin: auto;"&gt;
127    &lt;tr class="visibility-collapse"&gt;
128        &lt;td&gt;Cell 1 (Remove layout space)&lt;/td&gt;
129    &lt;/tr&gt;
130    &lt;tr&gt;
131        &lt;td&gt;Cell 2&lt;/td&gt;
132    &lt;/tr&gt;
133&lt;/table&gt;
134</pre>
135            </section>
136        </article>
137    </main>
138</body>
139</html>

Relativo al Modello a Scatola

Proprietà `width` e `height`

 1.width-height-fixed {
 2    width: 250px;
 3    height: 150px;
 4    background-color: lightblue;
 5}
 6
 7.width-height-percent {
 8    width: 50%;
 9    height: 50%;
10    background-color: lightblue;
11}
12
13.width-height-min-content {
14    width: min-content;
15    height: min-content;
16    background-color: lightblue;
17}
18
19.width-height-max-content {
20    width: max-content;
21    height: max-content;
22    background-color: lightblue;
23}
24
25.width-height-fit-content {
26    width: fit-content;
27    max-width: 150px;
28    background-color: lightblue;
29}

Le proprietà width e height sono proprietà CSS utilizzate per specificare la larghezza e l'altezza di un elemento. Queste sono particolarmente utilizzate per definire le dimensioni di elementi a blocco, immagini, video, ecc.

Nella classe width-height-fixed vengono specificati valori fissi per larghezza e altezza.
Nella classe width-height-percent vengono specificati valori percentuali per larghezza e altezza.

Valori che possono essere specificati

Le proprietà width e height possono avere i seguenti valori.

auto: Dimensione predefinita. Regola automaticamente la dimensione in base all'elemento padre.
Valori fissi: Specifica una larghezza fissa in pixel, percentuali o unità relative.(ex: 100px, 50%, 10rem)
- Ad esempio, 250px imposta la dimensione dell'elemento a 250 pixel, e 50% la imposta al 50% della dimensione dell'elemento padre.
min-content: Si adatta alla dimensione minima del contenuto.
max-content: Si adatta alla dimensione massima del contenuto.
fit-content: Regola la dimensione dell'elemento in modo appropriato in base alla dimensione del contenuto.

Specificare Valori Minimi e Massimi

min-width, max-width, min-height e max-height sono proprietà CSS utilizzate per impostare limiti di dimensione relativi alla larghezza e all'altezza di un elemento. Utilizzando queste proprietà, puoi garantire che un elemento rimanga entro un intervallo di dimensioni specifico.

Proprietà `margin` e `padding`

 1.margin-padding {
 2    margin: 20px; /* Margin outside the element */
 3    padding: 15px; /* Padding inside the element */
 4    border: 1px solid #333;
 5    background-color: lightblue;
 6    width: 300px;
 7    height: 40px;
 8}
 9
10.margin-only {
11    margin: 20px; /* Margin outside the element */
12    padding: 0; /* No padding inside the element */
13    border: 1px solid #333;
14    background-color: lightblue;
15    width: 300px;
16    height: 40px;
17}
18
19.no-margin {
20    margin: 0; /* No margin outside the element */
21    padding: 0; /* No padding inside the element */
22    border: 1px solid #333;
23    background-color: lightblue;
24    width: 300px;
25    height: 40px;
26}

Margin e padding sono proprietà utilizzate in CSS per controllare lo spazio esterno ed interno degli elementi all'interno del modello a scatola. Vengono utilizzate per regolare lo spazio tra gli elementi e per sistemare l'aspetto visivo.

Nella classe margin-padding, sono specificati sia margin che padding. C'è spazio di margin all'esterno del bordo solido e spazio di padding all'interno del bordo solido.
Nella classe margin-only, viene specificato solo il margin. Si può notare che l'area blu è più piccola rispetto alla classe margin-padding perché non c'è spazio di padding all'interno del bordo solido.
Nella classe no-margin, sia margin che padding sono impostati a 0. Si può notare che l'area blu è spinta completamente a sinistra perché non c'è spazio di margin all'esterno del bordo solido.

In questo modo, la proprietà margin definisce lo spazio esterno di un elemento, regolando la distanza tra gli elementi. D'altra parte, la proprietà padding definisce lo spazio interno di un elemento, regolando la distanza tra il contenuto e il bordo.

Proprietà `margin`

La proprietà margin imposta lo spazio esterno (margin) di un elemento. Viene utilizzata per creare spazio tra elementi adiacenti. Si possono specificare i seguenti valori:.
Valori fissi: Puoi specificare la dimensione del margin in pixel, unità relative (em, rem) o percentuali.(ex: 10px, 1em, 5%)
auto: Utile per centrare gli elementi a blocco. Quando viene specificata la larghezza, regola automaticamente i margini sinistro e destro.
Valori positivi e negativi: I valori positivi ampliano lo spazio, mentre i valori negativi avvicinano gli elementi.

Notazione abbreviata:

 1div.one-value {
 2    margin: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    margin: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    margin: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    margin: 10px 5px 15px 20px;
18}

La proprietà margin può accettare da uno a quattro valori.

Un valore: Si applica a tutti i lati.
Due valori: Il primo si applica alla parte superiore e inferiore, il secondo a sinistra e destra.
Tre valori: Si applica nell'ordine superiore, sinistra e destra, inferiore.
Quattro valori: Si applica nell'ordine di sopra, destra, sotto, sinistra.

Proprietà `padding`

Funzione:

La proprietà padding imposta lo spazio interno (padding) di un elemento. Viene utilizzata per creare spazio tra il contenuto e il bordo di un elemento. Si possono specificare i seguenti valori:.
Valori fissi: Specifica la dimensione del padding.(ex: 10px, 1em, 5%)
Valori negativi non possono essere usati. I valori del padding possono essere specificati solo come numeri positivi.

Notazione abbreviata:

 1div.one-value {
 2    padding: 20px;
 3}
 4
 5div.two-value {
 6    /* top-bottom left-right */
 7    padding: 10px 5px;
 8}
 9
10div.three-value {
11    /* top left-right bottom */
12    padding: 10px 5px 15px;
13}
14
15div.four-value {
16    /* top right bottom left */
17    padding: 10px 5px 15px 20px;
18}

Come per il margin, puoi specificare da uno a quattro valori.

Un valore: Si applica a tutti i lati.
Due valori: Il primo si applica alla parte superiore e inferiore, il secondo a sinistra e destra.
Tre valori: Si applica nell'ordine superiore, sinistra e destra, inferiore.
Quattro valori: Si applica nell'ordine di sopra, destra, sotto, sinistra.

Proprietà `box-sizing`

 1/* Default content-box : 300px + 2 * 20px + 2 * 10px = 360px */
 2.content-box {
 3    width: 300px;
 4    padding: 20px;
 5    border: 10px solid blue;
 6    box-sizing: content-box;
 7    background-color: lightblue;
 8}
 9
10/* Using border-box */
11.border-box {
12    width: 300px;
13    padding: 20px;
14    border: 10px solid red;
15    box-sizing: border-box;
16    background-color: lightcoral;
17}

box-sizing è una proprietà CSS che controlla come vengono calcolati larghezza e altezza di un elemento.

Nella classe content-box, la larghezza dell'elemento è 360px. La larghezza è 300px, con il padding a sinistra e a destra che totalizzano 40px e il border a sinistra e a destra che totalizzano 20px, per un totale di 360px.
Nel border-box, la larghezza dell'elemento è 300px. padding e border sono inclusi nella larghezza specificata.

Valori di `box-sizing`

Ci sono principalmente due valori per box-sizing: content-box e border-box, con content-box come valore predefinito.

`content-box`

 1.content-box {
 2    box-sizing: content-box;
 3    width: 200px;
 4    padding: 20px;
 5    border: 10px solid black;
 6}
 7/*
 8260px = 200px(width) +
 920px(padding-left) + 20px(padding-right) +
1010px(border-left) + 10px(border-right)
11*/

Quando viene specificato content-box, solo la larghezza e l'altezza del contenuto sono impostate da width e height. padding e border vengono aggiunti per determinare la dimensione finale. In altre parole, width e height si riferiscono solo all'area del contenuto.

In questo esempio, la larghezza specificata è 200px, ma con le larghezze del padding e del border a sinistra e a destra aggiunte, la larghezza effettiva finale dell'elemento è 260px.

`border-box`

1.border-box {
2    width: 200px;
3    padding: 20px;
4    border: 10px solid black;
5    box-sizing: border-box;
6}

Quando viene specificato border-box, width e height vengono calcolati includendo padding e border. In altre parole, la larghezza e l'altezza specificate diventano la dimensione totale del contenuto, del padding e del border.

In questo caso, il width specificato è 200px e, poiché anche padding e border sono inclusi, la larghezza effettiva finale dell'elemento rimane 200px. padding e border sono regolati al suo interno.

Riepilogo delle differenze di `box-sizing`

Proprietà	Metodo di Calcolo	Calcolo della Larghezza Effettiva
`content-box` (predefinito)	`width` si riferisce solo al contenuto. Vengono aggiunti `padding` e `border`.	`width` + `padding` + `border`
`border-box`	`width` include tutto (contenuto, `padding`, `border`)	Il `width` specificato viene utilizzato così com'è.

Vantaggi di `box-sizing`

L'uso di border-box stabilizza il layout. L'aggiunta di padding o border non modifica la dimensione specificata, rendendo i calcoli semplici.
È utile per creare layout flessibili. Nei design responsivi o nei layout complessi, border-box viene spesso utilizzato per evitare fluttuazioni impreviste delle dimensioni.

Come applicare `border-box` globalmente

1*,
2*::before,
3*::after {
4    box-sizing: border-box;
5}

Impostando il CSS in questo modo, è possibile applicare border-box a tutti gli elementi per evitare cambiamenti imprevisti delle dimensioni.

Riepilogo

box-sizing controlla se padding e border sono inclusi nel width e nella height di un elemento.
L'uso di border-box semplifica i calcoli delle dimensioni ed è adatto al design responsivo.

Proprietà `visibility`

 1.visibility-visible {
 2    visibility: visible;
 3}
 4
 5.visibility-hidden {
 6    visibility: hidden;
 7}
 8
 9.visibility-collapse {
10    visibility: collapse;
11}

La proprietà visibility viene utilizzata per mostrare o nascondere elementi, ma a differenza della proprietà display, influisce sul layout anche quando l'elemento è nascosto. Nasconde solo l'elemento, mantenendo la sua posizione e dimensione originali senza influire sul layout degli altri elementi.

Sintassi di Base

1element {
2    visibility: value;
3}

value: Un valore che specifica la visibilità dell'elemento.

Tipi di valori

La proprietà visibility può essere impostata sui seguenti valori:.

`visible`

Specificando visible, l'elemento verrà visualizzato. Questo è il valore predefinito.

`hidden`

Specificando hidden, l'elemento sarà nascosto ma lo spazio del suo layout verrà preservato.

`collapse`

collapse è utilizzato principalmente per righe o colonne di una tabella. L'elemento diventa invisibile e anche il suo spazio viene ignorato. Quando applicato a righe o colonne di una tabella, le righe o colonne nascoste vengono completamente rimosse dal layout.
Tuttavia, quando viene utilizzato su elementi blocco o inline normali, eccetto gli elementi della tabella, si comporta come hidden e lo spazio del layout viene mantenuto.

`inherit`

Specificando inherit si erediterà il valore della proprietà visibility dall'elemento genitore.

Differenze tra `visibility` e `display`

Esistono le seguenti differenze tra visibility e display.

visibility: hidden nasconde l'elemento ma mantiene il suo spazio e il layout.
display: none rimuove completamente l'elemento dal layout, permettendo agli altri elementi di occupare tale spazio.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Proprietà CSS per la Visualizzazione del Codice e le Citazioni Proprietà CSS relative allo sfondo

Proprietà CSS relative al modello a scatola

YouTube Video

HTML per Anteprima

Relativo al Modello a Scatola

Proprietà width e height

Valori che possono essere specificati

Specificare Valori Minimi e Massimi

Proprietà margin e padding

Proprietà margin

Notazione abbreviata:

Proprietà padding

Funzione:

Notazione abbreviata:

Proprietà box-sizing

Valori di box-sizing

content-box

border-box

Riepilogo delle differenze di box-sizing

Vantaggi di box-sizing

Come applicare border-box globalmente

Riepilogo

Proprietà visibility

Sintassi di Base

Tipi di valori

visible

hidden

collapse

inherit

Differenze tra visibility e display

YouTube Video

Proprietà `width` e `height`

Proprietà `margin` e `padding`

Proprietà `margin`

Proprietà `padding`

Proprietà `box-sizing`

Valori di `box-sizing`

`content-box`

`border-box`

Riepilogo delle differenze di `box-sizing`

Vantaggi di `box-sizing`

Come applicare `border-box` globalmente

Proprietà `visibility`

`visible`

`hidden`

`collapse`

`inherit`

Differenze tra `visibility` e `display`