Ciao.
Oggi parleremo del modello di scatola.
E qual è il modello box, è davvero un concetto generale di CSS
che ti aiuta a ridimensionare e posizionare il tuo elemento dove vuoi che vadano.
Quindi, una delle prime cose di cui parleremo e' altezza e larghezza.
So che l'ho già usato un po 'in alcune delle mie altre lezioni, ma
volevo essere molto specifico su come funziona.
E una delle prime cose che devi sapere è che l'altezza e la
larghezza di qualsiasi elemento in linea è il contenuto stesso.
Quindi, se hai un link, l'altezza e la
larghezza di quel link sono solo il testo della parte cliccabile del link.
Elementi che non sono in linea, cose che sono blocchi, blocchi in linea, cose del genere,
possono assumere proprietà di altezza e larghezza, e abbiamo visto questo nella lezione Display.
Quindi ogni volta che hai qualcosa che è in linea, se gli dai un'altezza e
una larghezza, il browser lo ignora.
Qualsiasi altra cosa, il browser va alla grande, posso andare avanti e cambiarlo per te.
Alcune delle altre cose a cui vogliamo pensare allora, quando abbiamo elementi,
è come si inseriscono sullo schermo.
Uno dei modi più semplici per
posizionare strategicamente le cose sulla tua pagina è quello di mettere i bordi intorno a loro.
Anche se non vuoi quei bordi più tardi nel tuo prodotto finale,
trovo che sia molto utile avere questa idea di quanto spazio occupa un elemento.
Quindi qualsiasi elemento può avere un bordo intorno ad esso sia il suo inline, il
blocco o il blocco inline.
E quelle proprietà del bordo specificano quale bordo stile vuoi,
quale larghezza del bordo e quale colore.
Sono piuttosto semplici.
Lo stile del bordo è l'unico che deve essere specificato.
Se non si specifica un colore o non si specifica una larghezza, nessun problema.
Il valore predefinito è nero e probabilmente un pixel.
Ma devi decidere che tipo di stile vuoi.
Quindi, in questo caso, ho detto, per tutte le mie div, voglio che abbiano un
bordo solido di un pixel intorno a loro, e non posso dirti di che colore
sia, perché non sono ancora così geek, ma immagino qualcosa come il blu.
Lo stile del bordo che si desidera specificare, mentre la maggior parte delle persone usa sempre il solido,
ci sono molti stili diversi.
È possibile utilizzare punteggiato, tratteggiato, scanalato, increspato, nascosto, inserto, inizio.
Ci sono un sacco di cose diverse che puoi fare, ed
è davvero una specie di differenza stilistica da parte tua.
Non presto molta attenzione a loro perché ho sempre usato solo solido me stesso.
Una volta deciso il tipo di stile desiderato, è possibile specificare la larghezza e il colore.
Quindi, quando arriva il momento di impostare la larghezza, se si decide di, è possibile impostarlo in
un numero di pixel o è possibile utilizzare le parole chiave, sottile, medio o grande.
Quando arriva il momento di fare il colore,
puoi fare la stessa cosa che abbiamo fatto da sempre.
Puoi semplicemente usare il nome, ad esempio blu, il valore RGB,
il valore esadecimale, o semplicemente per sapere, è anche trasparente.
Quindi può prendere il colore di qualsiasi cosa ci sia sotto.
Quindi, quando arriva il momento per te di specificare quanto grande vuoi che il tuo bordo vada,
puoi specificare in quattro modi diversi.
Nel primo esempio, basta dargli un numero.
In questo caso, tre pixel.
E quello che sta per fare,
sta andando a mettere un bordo di tre pixel intorno all'intero elemento proprio come questo.
Se si decide di dargli due valori, sta per impostare un bordo di tre pixel in
alto e in basso, e un bordo di dieci pixel a sinistra e a destra.
Questo è un modo davvero comune per impostare le cose quando si eseguono bordi e
altre proprietà, perché è una stenografia davvero bella
che è ancora molto semplice da capire e leggere.
Se gli dai tre valori, e' un po' piu' complicato, e io
inciampo sempre su quello che e', quindi faro' apparire la foto solo per assicurarmene.
Il primo valore è sempre il primo.
Vuoi che il bordo superiore sia di 3 pixel.
I 10 pixel sono per la sinistra e la destra, mentre i 20 pixel sono per la parte inferiore.
L' ultimo è quando dai quattro valori, e quando dai quattro valori,
ciò significa fondamentalmente in alto, a destra, in basso, a sinistra.
E questo imposterà il confine su quattro valori diversi.
Quindi la maggior parte delle persone usa il valore uno
, i quattro valori, e alcune persone usano anche i due valori.
Soprattutto, e uno dei motivi per cui ve lo mostro e' che puo' essere davvero intimidatorio,
e vi state chiedendo cosa stiano facendo la gente quando sta succedendo.
Questo è quello che stanno facendo.
Stanno usando le stenografie in modo che non debbano avere bordo destro,
bordo sinistro, bordo superiore, bordo inferiore.
Il margine è fondamentalmente quello spazio che è al di fuori del tuo confine.
È tra, quando dico te e il tuo vicino, o
quello che dovrei davvero dire è tra l'elemento, e il vicino dell'elemento.
Quindi ti da' quella stanza dei gomiti dove non vuoi che qualcuno ti tocchi.
Con i margini, ogni volta che gli dai un margine positivo,
stai fondamentalmente dicendo, sposta il tuo elemento a destra o in basso.
Se gli dai un margine negativo,
lo stai facendo avvicinare al vicino.
Lo stai facendo muovere a sinistra o verso l'alto.
Il riempimento è molto simile nel concetto al margine, ma
invece questo spazio è tra l'elemento e il suo bordo. Gli
sta dando un po' di spazio extra all'interno. In
alcuni casi potresti quasi pensarlo come schiacciare il testo.
Allo stesso modo, ogni volta che hai valori positivi per il
padding, lo stai spostando verso l'esterno dall'elemento. Gli
stai dando più spazio.
Se gli dai un padding negativo, stai effettivamente spostando il bordo vicino o
forse anche sopra gli elementi che si trovano accanto ad esso.
Quindi, con margine e padding, tutto quello che farai è dare un valore numerico. Gli
darai qualcosa tipo 3 pixel o 10 percento.
Non gli dai nessun tipo di colore.
Sara' sempre trasparente.
Il padding sarà sempre dello stesso colore dell'elemento, e il margine
sarà sempre lo stesso colore del genitore, probabilmente il corpo della pagina.
Essi, proprio come il bordo, possono essere definiti in quello da uno a quattro valori.
Quindi, se metti il margine di tre pixel, sarà un margine di tre pixel attorno a tutto.
Se dici padding, dieci pixel, cinque pixel, avrai in alto, in
basso, a sinistra e a destra.
Quindi lascia che ti mostri una foto veloce di quello di cui sto parlando.
In questo caso, ecco il mio testo è il mio elemento reale.
Ho detto che questo è quello che voglio andare avanti.
Il blu è il bordo intorno al mio elemento.
Il giallo è l'imbottitura.
E' lo spazio tra il mio testo e il bordo, e quell'arancione è il margine, e
quello che stai dicendo è, non avvicinarmi a nient'altro.
Dammi questo spazio intorno a me.
Quindi, potrebbe spostare i paragrafi verso il basso.
Potrebbe spostare i tuoi div verso il basso e più volte.
Quindi, pratica questo.
E mentre giochi sempre di più,
avrà più senso quale è un margine e quale è l'imbottitura.
Una delle cose che devi capire quando stai facendo padding, bordo e
margine, e tutte queste cose è che in HTML dice, la tua altezza e
la tua larghezza sono additive.
E quindi ciò significa che se decidi che vuoi che la larghezza del tuo elemento
sia di 200 pixel, probabilmente devi prendere in considerazione
quanto siano grandi tutti quegli altri aspetti e proprietà.
Quindi, in questo caso, parte della larghezza è il margine, più il bordo,
più il padding, più l'elemento effettivo con se stesso.
E così tutto si aggiunge davvero per ottenere ciò che consideriamo la
larghezza effettiva del tuo elemento.
E questo sarà importante quando guardi la tua pagina e la stai progettando
e cercando di decidere quanto spazio vuoi che ogni elemento occupi.
Quindi se guardiamo questo esempio proprio qui dove ho la larghezza è 100px,
il padding è 10px, il margine è 5px e il bordo è 1px.
Spero che in questo momento, stai facendo i calcoli nella tua testa, e
prometto di non dare molto più matematica di questo, ma lo stai facendo per capire
quanta larghezza fa questo elemento, fa questo div, in realtà ha bisogno sulla pagina.
E in questo caso la larghezza è di 132 pixel.
Il 100, più 10, più cinque, più uno, più uno, più cinque, più dieci.
Tutto somiglia.
L' altezza, allo stesso modo, è l'altezza più l'imbottitura superiore e inferiore, il
margine superiore e inferiore e il bordo superiore e inferiore.
Va bene, quando parliamo di margine,
volevo solo lanciare questa diapositiva anche se non si
ricollega a molte delle altre cose di cui abbiamo dovuto parlare.
Ma è perché il margine è molto importante per
quando si desidera centrare gli elementi su una pagina.
Quando vogliamo centrare il testo, potremmo semplicemente usare il centro di allineamento del testo,
e tutto sembrava davvero buono.
Ma quando vuoi centrare gli elementi, è un po 'più difficile.
E quindi il modo predefinito per farlo è usare il comando margin zero auto.
Quindi, se vi ricordate, quel primo zero, che sta per alto e basso, e
quindi non sarà davvero importato di questo.
L' auto è ciò che lo mette a destra e a sinistra.
Ora questo funzionerà solo se l'elemento è display: block,
se l'elemento non è fluttuante, è l'elemento ha una larghezza che non è automatica, il
che significa che lo si imposta.
E quest'ultimo è se l'elemento non è fisso o posizione assoluta.
Ora non ho ancora coperto la posizione.
E quindi la buona notizia è che, visto che non l'ho coperto,
probabilmente non l'hai fatto, e non devi preoccuparti di queste due cose.
Tuttavia, mentre si tenta di inviare gli elementi, tornare a questa diapositiva, se necessario,
e selezionare questi elementi per assicurarsi che tutte queste proprietà si adattino.
E questo e' il modo migliore per centrare le cose in questo momento.
Infine, quando parliamo di questo voglio aggiungere un'altra opzione, e questa
si chiama box-size.
E ciò che fa il dimensionamento della scatola è che prende parte della matematica da quell'altezza additivo
e larghezza additivo.
Quali sono le tue opzioni è che puoi avere content-box, quindi scatola-size content-box,
e questo è solo il tuo additivo predefinito.
Dovrai ricordare quanto spazio stai usando.
Il prossimo si chiama border-box.
E border-box prende in
considerazione la larghezza, il contenuto, il padding e il bordo.
Quindi, se dici che vuoi che la larghezza sia di 200 pixel,
non farà effettivamente l'elemento 200 pixel.
Lo rendera' 200 pixel meno l'imbottitura e il bordo.
Una delle ultime cose da ricordare è che prenderemo in considerazione il padding e il
bordo, non prenderà in considerazione il margine.
Quindi, finalmente,
una delle cose che ti mostrerò in questo esempio in un secondo,
è diversi modi in cui puoi impostare l'altezza e la larghezza di diversi elementi.
E ci sono due modi comuni per farlo.
Il primo è chiamato assoluto, e
questo è quando si imposta un elemento su una dimensione specifica.
Dici che voglio che siano cosi' tanti pixel, o cosi' tanti millimetri, o cosi'
tanti centimetri.
Pixel è un modo molto comune per impostare le dimensioni.
L' altro tipo di misura è quello che chiamo fluido e
imposta la dimensione relativa agli elementi circostanti o agli elementi genitore.
Quindi puoi usare cose come la percentuale.
È possibile utilizzare vw, che sta per
larghezza della vista, vh che sta per altezza della vista.
Puoi anche usare cose come em e rem, che non sono comunemente usati, ma
in realtà impostano la dimensione relativa ai suoi genitori.
Quindi andiamo avanti e
passiamo al mio esempio in modo da poter giocare con questo solo un po '.
Non sara' abbastanza per dimostrare tutto cio' che possiamo fare, ma
speriamo che possa iniziare.
Quello che ho qui è un file HTML molto semplice
in cui ho un lato sinistro e un lato destro.
Ma come puoi vedere, non sono a sinistra e a destra in questo momento.
Sono solo uno sopra l'altro.
Quindi la prima cosa che voglio sapere e'... puoi mettere questi div uno accanto all'altro?
Dovremo usare una sorta di combinazione di display, altezza
, larghezza e imbottitura.
Quindi andiamo avanti e facciamolo.
Quindi qui nel mio file CSS,
subito puoi vedere questo tipo di cose di sfondo che ho fatto.
Ora, quando vuoi che le cose siano l'una accanto all'altra, devi dargli una larghezza,
perché in questo momento occupano il 100%.
Un' opzione sarebbe per te andare avanti e impostarlo su una sorta di pixel.
E dire forse 200 pixel e 200 pixel, e vedere cosa succederebbe,
vedere se funziona.
Il problema con farlo, poiché decommento il mio codice qui, è che man mano che le persone
vanno su diverse dimensioni del browser, i tuoi numeri potrebbero essere troppo grandi o troppo piccoli.
Quindi quello che ho fatto qui è che sono andato avanti e ho impostato la mia larghezza al 48%.
Ora farlo è davvero fantastico, e uscirò da questa riga
solo per un secondo, perché la maggior parte delle persone ha l'idea che tu voglia
impostare la larghezza su qualcosa di più piccolo.
Quello che dimenticano, è che anche se stanno prendendo solo il 48%,
in realtà farò anche qualcosa di veramente piccolo.
20%, non stanno andando l'uno accanto all'altro.
Quindi devi ricordare che vuoi usare quelle misurazioni del fluido.
Quindi torniamo qui, lo riporto al 40%.
Anche se lo rendi davvero magro, finché non dici al browser,
oh, so che questo è bloccato ma lo cambierò in blocco in linea,
non lascerà mai che gli elementi di blocco siano vicini l'uno all'altro.
Ecco perché devi ricordarti di fare entrambi questi elementi.
Quindi andiamo avanti e risparmiamo e ricarichiamo.
E così potete vedere che sono andato avanti e ho fatto la mia larghezza.
Ho fatto il mio blocco espositivo.
Ho la mia imbottitura.
Ho il mio confine e ho un po' di margine.
Quindi l'ultima cosa che faro', solo per farla finita per mostrarti cosa sta succedendo,
e' che andro' avanti e
cambiero' la cosa al 50%, perche' e' un errore molto comune che la gente commette.
Dicono che voglio due cose l'una accanto all'altra.
Quindi li farò ogni 50%.
Non dimenticare che quando lo fai,
non funziona perché è il 50% prima di mettere in considerazione il confine.
Quindi assicurati di giocare con tutte queste cose, che stai giocando con
il margine, stai giocando con il padding, stai giocando con il bordo.
Perche' e' cosi' che riuscirai a far funzionare le cose, modificando, ritoccando, ritoccando.
Quindi andiamo avanti e rivediamo.
Quando arriva il momento di iniziare a implementare tutte queste idee,
il tuo modello di scatola con il tuo padding, contenuto, margine
, ecc., Vuoi davvero progettare prima schizzi su carta, perché è davvero difficile
infilare le cose dopo che hai già creato un contorno, va bene?
Quindi progetta prima, codice secondo.
La seconda cosa che potresti voler fare è usare il modello box
per ridurre la complessità del tuo codice.
O almeno la complessità della tua matematica cercando di capire
quali sono le cose che si adattano dove.
Infine, non importa quello che fai,
devi ricordare che il margine deve sempre essere considerato.
Può essere complicato quando inizi a provare a mettere insieme la tua pagina,
e ottenere le cose esattamente dove vuoi che andino, e
non abbiamo ancora parlato del posizionamento, che sarebbe anche un altro elemento.
Quindi, per ora, pratica queste cose in piccoli modi.
Usa Inspect Element per giocare con esso e non devi cambiare così tanto il tuo codice.
Finche' non avrai le cose proprio come vuoi che sembrino.
E non preoccuparti, stiamo commettendo tutti degli errori.
Lo stiamo facendo tutti insieme.
Ma penso che la tua pagina si spera sempre
più vicina a qualcosa che vorresti davvero mettere sul web.
Bel lavoro.