Ciao, oggi parleremo di Display e Visibilità sulla tua pagina web.
Ora, quando arriva il momento di creare la tua pagina, ancora e ancora
ti dirò che stendere dove vuoi che le cose siano è la chiave per una pagina davvero efficace.
E una delle cose che dovete ricordare è che ogni elemento che guardiamo è
fondamentalmente una scatola.
E il modello di scatola e' qualcosa che copriremo in una futura lezione.
Ma prima di arrivare ai dettagli, voglio solo parlare di alcuni dettagli.
Perché il funzionamento della visualizzazione sull'elemento di visualizzazione influisce
su tutti gli elementi adiacenti della pagina.
Quindi, prima di iniziare, voglio solo ricordarti che ogni elemento della tua pagina e' una scatola.
Pensala in questo modo.
E mostrare è come si può decidere se le caselle devono essere uno accanto all'altro,
sotto l'altro, e cose diverse come quella.
Quindi, quando parliamo di visualizzazione,
ci sono alcuni valori comuni che praticamente tutti
usano o sono solo un default, quindi lo hai usato senza nemmeno saperlo.
Gli elementi che sono in linea si siedono accanto ad altri elementi, occupano
abbastanza larghezza e altezza e non di più, quando li metti sulla pagina.
Quindi, penso a questi come ai miei bravi figli negli elementi del minivan.
Va bene se voglio mettere tre bambini sul sedile posteriore.
Non si gomiteranno a vicenda, stanno bene.
Stanno andando d'accordo.
L' altro tipo di visualizzazione è blocco.
E quale blocco fa è forzare un'interruzione di linea tra i tuoi elementi.
Quindi, di nuovo, con il mio esempio,
ho un bambino che non può stare accanto a nessun altro.
Devo metterli nella loro fila.
Anche se è molto piccola e non occupa così tanto spazio,
ha un'intera fila tutta tutta per se stessa quando guidiamo in macchina.
Ciò che è bello degli elementi di blocco è,
mentre occupano tutta la larghezza orizzontale e l'altezza appena sufficiente,
puoi entrare e puoi impostare un'altezza e una larghezza su quegli elementi.
Quindi, anche se è un blocco, e
hai riservato l'intera larghezza della pagina, puoi dire, ma
voglio davvero che sia solo 40 pixel, o metà della pagina, o qualcosa del genere.
Quindi, con l'inline, occupa abbastanza spazio e non sei in grado di cambiarlo.
Non puoi dire che voglio che sia piu' grande o piu' piccolo.
Se e' in linea, e' tutto cio' che ottieni.
Con il blocco hai un po 'più di flessibilità, ma
hai il problema che stai riservando molto spazio.
Quindi, naturalmente,
quello che ci è venuta in mente è questa idea di qualcosa che prende il meglio di entrambi.
E questo è un blocco in linea.
Gli elementi che hanno il blocco in linea di visualizzazione saranno gli stessi di inline e
che possono essere uno accanto all'altro, ma accetteranno anche altezza e larghezza.
Quindi se avete due cose che vogliono stare l'una accanto all'altra, ma
volete dare loro un sacco di spazio, e in questo momento sono in linea.
Bene, vai avanti, cambialo in blocco in linea, e
poi puoi dargli un'altezza e una larghezza.
E se hai qualcosa che è blocco e
vuoi due di loro accanto a ciascuno, di nuovo, nessun problema.
Cambiali in blocco in linea e puoi impostare la larghezza e l'altezza.
Il quarto che in realtà non usiamo tanto è l'idea di mostrare nessuno.
E quello che succede qui è se hai un elemento sulla tua pagina e non
gli mostri nessuno, è come se il browser ignori completamente che esiste.
E' come se l'avesse sollevata e l'avesse tolta dalla pagina.
Quindi questi quattro, l'inline, il blocco, il blocco in linea e
il nessuno sono quelli con cui inizieremo davvero a giocare all'inizio.
Quindi quello che ho qui è solo un semplice file che avrà
tre elementi span, tre elementi div e tre elementi paragrafo.
Se ricordi, gli elementi span sono in linea, quindi
occuperanno solo lo spazio di cui hanno bisogno.
Ma i div e i paragrafi sono isolati, quindi
occuperanno più spazio.
Sul lato laggiù, quello che ho fatto è che ho aggiunto un po 'di stile,
che può o non può avere senso quando ne parliamo per la prima volta, ma
ho dato a ciascuna delle mie campate un'altezza e una larghezza.
Fondamentalmente, tutti i miei elementi, un'altezza e una larghezza e un colore di sfondo diverso.
Quindi, se dobbiamo darci un'occhiata adesso.
Si vedrebbe che ho reso tutte le mie campate verdi, tutte le mie div blu, e
tutti i miei paragrafi una sorta di colore rosato viola.
E ognuno si stende esattamente per impostazione predefinita come sarebbe andato.
Il motivo per cui i div sono grandi come sono e
i paragrafi sono grandi come sono, ancora una volta lo mettiamo nel nostro foglio di stile.
Puoi vedere la mia altezza e la mia larghezza.
Se non li includessi per impostazione predefinita, questi div e
paragrafi occuperebbero l'intera larghezza dello schermo e
sarebbero davvero piccoli perché avrebbero solo bisogno di spazio sufficiente per avere quel testo.
Quindi andiamo avanti e giochiamo con questo.
Normalmente, andrei nel mio foglio di stile e
metterei cose diverse, provavo schermi diversi e cose diverse del genere.
Ma spero che sia un po' piu' chiaro per
te se invece lo faccio allo stesso tempo.
Quindi puoi seguire insieme a me con ciò che è ispezionare l'elemento, oppure
puoi andare avanti e cambiare il codice nel tuo file, salvarlo, aggiornarlo, salvarlo, aggiornarlo.
Quindi ho avuto modo di ispezionare l'elemento qui facendo clic con il pulsante destro del mouse, e
quello che ho intenzione di fare ora è fare clic con il pulsante destro del mouse su uno di questi elementi span.
Ispeziona Elemento e lo apre per me.
Qualsiasi elemento della tua pagina,
puoi giocare con, puoi giocare con solo quel particolare elemento che stai
ficcando proprio lì o posso dire che voglio giocare con tutte le campate.
Quindi guardiamo quaggiù.
In questo momento, ho un'altezza e una larghezza per ciascuno dei miei elementi span.
Ma in realtà non sono molto grandi.
Allora, come possiamo cambiarlo?
Se c'e' qualcosa in linea, ma se vuoi dargli un'altezza e una larghezza,
scendiamo a mostrare e io vado qui.
E cerchero' il blocco in linea.
Boom, subito le mie campate hanno preso quelle proprieta'.
Quindi, prima, quando erano in linea, erano piccoli.
Quando sono bloccati in linea, posso modellarli davvero bene.
E se li sto cambiando in blocco, Ora puoi vedere che sono uno
sopra l'altro perché gli elementi di blocco non amano essere uno accanto all'altro.
L' ultima proprieta' che vi mostrero' qui e' questa idea di nessuno.
Quando non ne hai, è come se le campate non esistessero nemmeno.
Non hai risparmiato spazio per loro,
non è come se sapessi nemmeno guardando la pagina che sono mai stati lì.
Quindi tipo di cosa interessante da fare e potresti usarla più tardi se vuoi che le cose
appaiano alcune volte e non altre ma non vuoi lasciare un grande spazio bianco.
Quindi, vai avanti e prenditi un secondo e
clicco solo su alcune delle altre cose.
Quindi, per esempio, le mie div, posso andare e posso dire, sai
una cosa, voglio fare solo questo div, voglio andare avanti e farlo in blocco, e vediamo cosa succede.
Beh, la cosa strana e' che l'ho cambiato e non e' successo niente e
mi chiedevo se sai perche'.
Quando hai il blocco in linea, stai dicendo oh, vai avanti e
mettimi accanto ad altre persone se mi sto bene.
Ma se anche i tuoi vicini sono bloccati, non funzionerà.
Quindi ora, invece di cambiarne solo una, cambiero' tutte le div.
E si può vedere, oh, perché sono circa il 45%,
due di loro stanno insieme, ma l'ultimo no.
Quindi non c'è davvero un buon modo per sentirsi a proprio agio con il display
finché non prendi questo codice e inizi a cambiare le cose.
Cosa succede se è in linea?
Cosa succede se si tratta di un blocco in linea?
Cosa succede se e' span?
E fai molta attenzione al fatto che non
è sufficiente sapere quale sia il display per l'unico elemento su cui stai lavorando,
devi anche conoscere il display per i suoi vicini.
Ma, andiamo avanti e parliamo un po' di più.
Quando stiamo parlando di display,
è abbastanza comune parlare anche di altre due proprietà pure.
E questi sono chiamati float e chiaro.
E ciò che float e chiaro fanno è che non dicono necessariamente dove vuoi che la pagina
sia, l'elemento sulla tua pagina sia specificamente, ma
dove generalmente vuoi metterlo.
Per impostazione predefinita, quando il browser sta mettendo cose sulla pagina,
inizia nell'angolo in alto a sinistra.
E inizia a metterli dentro, quindi guardando il tuo sito, sarebbe come prima
cosa, la prima cosa, oh, la prossima è blocco, quindi è meglio che lo metta sotto.
E continua ad aggiungere cose.
Quindi, se il tuo browser è davvero grande, puoi inserire più elementi di span uno accanto all'altro,
se è piccolo, puoi stare meno.
Beh float ti permette di riposizionare le cose, e
dice hey voglio che tu tipo di galleggiare questo ovunque,
e se dico float giusto, voglio che tu lo metta il più a destra possibile.
Se dico galleggiare a sinistra, voglio che tu lo metta il più a sinistra possibile.
Gli altri elementi sono fondamentalmente consapevoli l'uno dell'altro, e quando usi float,
non si sovrappongono ma le cose sembreranno un po 'folle.
E quando aggiungi di nuovo float, stai influenzando i
tuoi vicini perché i tuoi vicini devono sapere dove stai andando.
Ed è per questo che abbiamo questa proprietà aggiuntiva chiamata chiaro.
Perche' a volte, quando stai codificando, vuoi solo assicurarti che le cose non
fluttuino alla tua sinistra o alla tua destra.
Vuoi davvero avere quello spazio tutto per te stesso,
nel qual caso puoi usare a sinistra libera, a destra o cancellare entrambi.
Liberati a sinistra per assicurarti che non ci sia nulla che fluttui sulla sinistra.
Chiaro a destra significa che non c'è niente che fluttua a destra.
E chiarisci entrambi, bene come puoi immaginare,
significa che nulla dovrebbe galleggiare accanto a te.
Quindi andiamo avanti e diamo un'altra occhiata a un altro esempio in cui
giocherò con lo stesso codice, ma inizierò a usare float e clear pure.
Quindi stiamo andando a guardare lo stesso file esatto che stavamo solo guardando
quando stavo giocando con il blocco di visualizzazione, in linea, nessuno, ecc
Ma ora, stiamo andando gettare float e chiaro nel mix pure.
Quindi ecco il codice che stiamo guardando, ed ecco il sito web.
E quindi la prima cosa che faro' e' giocare con le campate quassu' e
provero' a farle fluttuare.
Quindi ricorda, quando galleggia qualcosa, stai fondamentalmente dicendo mettilo
il più lontano possibile e gli altri elementi stanno quasi andando a comportarsi come se
non ci fossero, ma non si sovrappongono.
Quindi vado quaggiu', vado al mio carro.
Diciamo galleggiante.
Ora, la prima cosa che faro' e' che la buttero' a sinistra, il
che significa che non si muoveranno troppo.
Quello che voglio che tu cerchi
è che ora c'è un po' di spazio tra le mie campate.
Quando lo cambio a sinistra, quello spazio scompare e
il div in realtà va anche sotto di esso, perché le campate sono in cima.
Ora, quando provo a cambiarlo e fluttuarlo bene.
Quando la faccio fluttuare bene, voglio che tu noti che non solo non hanno
spazio tra di loro, che sono di nuovo uno accanto all'altro.
Ma se guardi, l'ordine degli A, B e C sono diversi.
Perché i primi elementi che viene posizionato sulla pagina sono span A e quindi
lo sposta il più a destra possibile.
E poi quando sta facendo span B, si sta muovendo il più a destra possibile, e si
estende anche C.
Quindi questo è qualcosa di interessante,
e puoi vedere che se fossero a sinistra, i div li sovrapporrebbero.
Va bene, allora andiamo avanti e facciamo ancora un po' di queste cose.
E farò un cambiamento tutte le mie div, in modo che lo siano anche loro.
Andiamo qui, galleggiare a sinistra.
Quindi ormai la pagina sembra un po' pazza perché le cose stanno andando dappertutto
e tu davvero, probabilmente non vuoi che sembri in questo modo.
Soprattutto se volessimo che tutti i nostri paragrafi fossero davvero in
fondo alla pagina.
Quindi andro' quassu' ai miei paragrafi.
E io andro' avanti e diro' che non faro' galleggiare questi.
Invece, diro' che ho finito con il galleggiare, per
favore smettila di fluttuare le cose intorno a me.
E liberero' entrambe le parti.
Quindi i paragrafi ora dicono, allontanami da tutta questa follia fluttuante.
Voglio solo stare quaggiu'.
Galleggiante, radura, cose diverse come questa.
Quando facciamo questo tipo di esempi di codice molto semplici nella lezione,
non sempre avranno tanto senso come quando li metti come
parte di qualcosa di più grande.
Ma il problema è che non posso mostrarvi esempi di qualcosa di più grande perché vi
addormentereste tutti circa tre o quattro minuti nel codice.
Quindi vai avanti, fai quello che abbiamo sempre fatto e
gioca un po' con questi finché non avrai l'idea di quello che fanno.
Col passare del tempo,
inizierai a capire quando vuoi che facciano effettivamente questo tipo di azioni.