Original subtitles

Ben tornato.

In questo video voglio parlare del modello di scatola in CSS.

È un concetto molto importante ed è qualcosa di cui potresti essere stato curioso

nella parte posteriore della tua testa, e questa è questa immagine proprio qui.

In CSS abbiamo questa idea del modello di scatola che ha il contenuto, ha il riempimento, il bordo che abbiamo visto prima

e

quindi il margine.

Quindi ne parleremo in questo video.

Quindi al momento non abbiamo il nostro sito Web così carino, ma ho lasciato, intenzionalmente, la nostra pagina di accesso ancora vuota e vedi

che non ci sono stili applicati perché se andiamo alla pagina di accesso e la trascinerò qui fa

riferimento a "style2" che non ha molti stili in corso. Per enfatizzare davvero questo punto,

volevo

solo creare un "div" al posto del "Lorem Ipsum". Se do a questa una 'classe' di 'boxmodel' posso

entrare nel mio 'style2' che trascinerò qui e posso dire '. boxmodel '' border: 5px solid red 'I save

this and refresh.

Ok, quindi abbiamo il nostro modello di scatola. Aggiungiamo qualcosa in questo 'div'.

Noi abbiamo un'.

E in questo momento sta coprendo l'intero spazio.

Ma se avessimo altre tre "div", chiameremo questa "B" la successiva "C" che salverò e aggiornerò.

OK, abbiamo questi,

e se li volessimo tutti in una riga, potresti ricordare che si trattava di "display: blocco in linea" e

io li salvavo, li aggiorna e li abbiamo.

OK, parliamo del modello di scatola qui.

Diciamo che volevamo più spazio all'interno di questi per le lettere.

Bene, in quel caso possiamo usare qualcosa di simile al 'padding', così il padding posso mettere 20 pixel [padding: 20px], salvare e aggiornare e

c'è il nostro padding.

Ma supponiamo di volere imbottiture diverse in modo che i lati siano più larghi di quelli superiori.

In tal caso possiamo fare qualcosa come cinque pixel in alto, 20 pixel a destra, 5 pixel

in basso e 20 pixel a sinistra.

Mi aggiorno e lo guardo.

E questo è solo uno standard a cui dovrai abituarti in alto, a destra, in basso '(e) a sinistra.

Puoi anche effettivamente eseguire il riempimento come puoi vedere nel menu a discesa in basso, a sinistra, in alto, a destra per specificare.

Ma questo è un modo più veloce di farlo.

Se ricordi che ce n'è un altro e quello era "margine".

Quindi il margine ci consente di creare spazio al di fuori del confine.

Quindi se vado '20px' qui e salvo, aggiorna puoi vedere che abbiamo creato 20 pixel sul lato sinistro e destro ma

anche in alto e in basso.

Diciamo che vogliamo solo spazi tra le scatole ma non in alto e in basso.

Bene, di nuovo lo stesso principio.

Possiamo fare 0 pixel, 20 pixel, 0 pixel e 20 pixel.

Quindi in alto, a destra, in basso (e) a sinistra, salva e aggiorna.

Ecco qua

Ora questo potrebbe diventare noioso.

C'è un altro modo abbreviato e puoi rimuoverlo.

Quindi questo significa in alto e in basso, questo significa sinistra e destra.

Lo salvo e aggiorno.

Niente dovrebbe cambiare e non lo fa.

E possiamo fare lo stesso anche qui in alto.

Perfezionare.

Un'ultima cosa che voglio mostrarti è che se apriamo i nostri strumenti per sviluppatori.

Quindi di nuovo "ispezioniamo".

Vedrai nei nostri stili che abbiamo il nostro modello di scatola.

Quindi, se vedi qui abbiamo i nostri contenuti, abbiamo la nostra imbottitura e dice 20 pixel, 5 pixel, 5 pixel.

Abbiamo il nostro bordo 5 pixel, 5 pixel, 5 pixel, 5 pixel e quindi il nostro margine, 0 con 20

(pixel) sul lato.

Quindi di nuovo Chrome ti consente di navigare e assicurarti che tutti questi siano eseguiti correttamente.

L'ultima cosa che potresti chiedere è: cosa posso dire di questo contenuto?

Ed è molto semplice puoi fare qualcosa come 'larghezza', facciamo '33px' salva e aggiorna e fai anche

'altezza', fai '55px' salva e aggiorna e vedrai qui che nel nostro modello di scatola ora

abbiamo il contenuto con 33 pixel per 55 pixel.

Va bene, per ora è tutto.

Ci vediamo al prossimo.

Ciao ciao