Quindi uno dei concetti più importanti che dobbiamo ancora esaminare e valutare è il posizionamento degli elementi.
Quindi, come possiamo creare una pagina o spostare un div in alto a destra.
O come possiamo rendere più ampio un tag di ancoraggio o aggiungere spazi tra le immagini.
Tutto ciò è molto importante ed è tutto collegato a qualcosa chiamato il modello di box.
Quindi il modello di scatola è questa idea di base che è davvero centrale in tutto ciò che in HD
si valuta, cioè che praticamente ogni elemento ha una scatola rettangolare attorno ad esso.
Quindi possiamo vedere qui solo andando a qualsiasi pagina web su MDA e ho l'ispettore aperto e ho
selezionato la lente d'ingrandimento.
E mentre sorvolo su ogni elemento, puoi vedere che c'è una scatola attorno ad esso.
Quindi questo H2 ha una scatola blu attorno ad esso.
Questo ha una scatola.
Anche le cose che non sono particolarmente squadrate.
Quindi questo div angolo arrotondato. Ha ancora una scatola attorno ad esso.
Dietro le quinte.
Quindi questo qui e
questo non è davvero rotondo o non squadrato per avere questi angoli arrotondati ma è ancora una scatola.
Quindi queste scatole sono davvero utili dietro le quinte perché possiamo disegnare su di esse proprietà differenti.
Quindi ci sono quattro proprietà o quattro parti diverse di ogni scatola.
Ci sono molte più proprietà ma per parti della scatola che possiamo manipolare.
Quindi supponiamo che questo diagramma che è anche da MDA e sia di un paragrafo.
Quindi ho un testo in un paragrafo e gli do un bordo arancione o giallo e questo è ciò che l'utente vede
del testo e un bordo ma dietro le quinte ci sono in realtà alcune altre cose che accadono.
Quindi tra il confine e il testo c'è qualcosa chiamato padding.
Quindi il riempimento è solo lo spazio all'interno del bordo.
Quindi tra il contenuto e il bordo è il padding
e poi c'è anche il margine che si trova dall'altra parte tra il confine esterno e qualsiasi altra cosa.
Quindi usiamo il margine spesso per aggiungere la spaziatura tra gli elementi.
Quindi, se avessimo due paragrafi e volessi
che fossero più distanti, allora userei il margine e aumenterei quello.
Quindi ora faremo
un po 'di approfondimento sulla sintassi di alcune delle proprietà che vogliamo usare prima di farlo.
un modo per creare qualcosa che assomigli a questo.
Voglio solo mostrarti due cose che puoi guardare avanti per rendere il primo dei più eccitanti, ma l'importante è che ora abbiamo
Fino ad ora non abbiamo in realtà un modo per rendere queste scatole connesse l'una con
l'altra che hanno un assegnato a loro ma sono vuote, non c'è testo all'interno.
Quindi impareremo a conoscere il modello di scatola e applicheremo qui per
fare questo tic tac toe board e quindi faremo questo sito portfolio per un fotografo immaginario.
Quindi questo è bello.
Le sue immagini sono reattive, quindi cambiano le dimensioni e cambiano le dimensioni della finestra e la griglia.
Tutto questo si basa sui concetti che imparerai qui.
Quindi ho intenzione di andare avanti e aprire qui sublime.
E ho un documento davvero semplice che ho creato.
Quindi è solo un semplice HTML.
Ha un foglio di stile collegato.
È vuoto.
A parte alcuni commenti e poi due paragrafi.
Quindi, se lo apro, puoi vedere che
è molto semplice e noioso lo useremo per giocare con il modello di box.
Quindi andrò al mio
successo e selezionerò i paragrafi e poi copierò questi commenti all'interno in modo che possa
scrivere del codice sotto di essi solo per dirti visivamente cosa sto facendo.
Quindi iniziamo dando a questi un confine.
Quindi questo dovrebbe essere il bordo
di revisione e facciamo il pixel blu solido che si aggiorna e si vede che otteniamo un bordo intorno al contenuto.
E quello che noti anche è che il contenuto qui va fino in fondo allo schermo.
un paragrafo per default, esso attraversa tutto lo schermo.
Il nostro confine non si ferma qui ed è perché quando facciamo
Quindi, se voglio
cambiare la larghezza del paragrafo stesso del testo, posso usare la proprietà width e ho intenzione di andare avanti e dare una larghezza di uno.
Facciamo 200 pixel per iniziare.
E se aggiorno, puoi vedere che ora abbiamo cambiato la larghezza.
Se ispeziono il contenuto non è blu.
E poi abbiamo un confine attorno ad esso.
Quindi il contenuto è blu.
E su questo diagramma c'è questa scatola proprio qui questa scatola degli elementi.
E poi abbiamo un confine che lo circonda direttamente.
Non c'è spazio tra il confine e il contenuto.
Un'altra cosa con la larghezza e anche c'è un'altezza.
Facciamo quindi un'altezza di 300 pixel e vediamo che abbiamo appena aggiunto un po 'di spazio.
Ho intenzione di sbarazzarmene, ma c'è un'altezza che possiamo usare come con.
Non dobbiamo usare solo i pixel, quindi possiamo usare le percentuali.
E quelli sono davvero utili quindi lascia che ti mostri.
Facciamo il 50 percento e potresti chiederti che cos'è il 50 percento di.
E la risposta è che è il 50 percento dell'elemento genitore.
Quindi in questo caso è il corpo
che il paragrafo è all'interno del paragrafo che attraversa metà del corpo.
Nel nostro caso il corpo è l'intera pagina.
Era tutto finito.
Quindi finiamo con metà pagina.
in questa griglia di immagini.
E cosa c'è di bello in questo se cambio la dimensione della finestra cambia anche così molte persone lo usano e useranno quello effettivamente da usare
Puoi vedere che le immagini cambiano la loro larghezza e questa è una percentuale.
OK, lo manterrò così per ora.
E poi la prossima proprietà di cui parleremo è il padding
e ricorda che il padding è questo spazio tra l'elemento e il bordo.
E proprio adesso non abbiamo nessuno spazio in cima ai bordi.
Quindi c'è una proprietà chiamata padding e
possiamo dargli un numero di pixel e facciamo 10 pixel per iniziare.
Salva l'aggiornamento del file.
E ora abbiamo 10 pixel di imbottitura su tutti i lati.
Quindi se ispeziono ora vedrai che ora c'è
questo contenuto verde che è stato introdotto, quindi abbiamo il contenuto blu stesso e poi abbiamo il verde attorno
ad esso che è tra il confine e il contenuto, quindi possiamo ovviamente incrementarlo e otteniamo molto più spazio all'interno.
Ma questo non è l'unico modo per impostare il padding.
Questo lo imposta su tutti e quattro i lati come esattamente lo stesso.
Ma a volte vogliamo solo il riempimento su un lato o due lati proprio come con il bordo.
Esistono scorciatoie per la versione più lunga in cui è un bordo superiore di 10 pixel con il bordo inferiore di cinque pixel.
Stessa cosa con il padding e lo commenta e possiamo fare
qualcosa come il padding a sinistra di 40 pixel e fresco.
E abbiamo imbottiture proprio qui.
E questo è l'unico posto per il riempimento.
E ricordo lo spazio qui sopra
questo blu non è il riempimento che è il suo vero contenuto che è da qui con qui.
Così diverso anche se sembra che ci sia spazio a destra.
Viene da un posto diverso.
Quindi un'altra cosa che possiamo fare qui è giocare con il margine.
Quindi il margine è un ultimo pezzo del puzzle.
È lo spazio all'esterno del confine.
Quindi tra gli elementi.
Quindi questo sarà utile perché potremmo voler
incrementare o aumentare questo spazio proprio qui o come esempio qui questo spazio proprio qui tra le immagini viene impostato usando Marjan.
e facciamo qualcosa di ovvio come 100 pixel da avviare e aggiornare.
Quindi sembra proprio come il padding, quindi possiamo dire margine
E quello che è successo è che ora
abbiamo 100 pixel di spazio su tutti i lati dell'elemento all'esterno del confine.
Quindi trova l'aspetto.
Vedrai che in
Chrome è identificato come arancione, quindi il blu è il contenuto Verde è il riempimento in Arancione è il margine.
Quindi, proprio come il padding.
superiore a 500 pixel.
A volte vogliamo solo impostare una parte del margine su un lato in modo che possiamo fare qualcosa come margine
E poi quando arrivano a questo
fuori per ora e salvano e abbiamo solo spazio in alto a sinistra non c'è niente.
E poi più spazio in cima a questo.
Niente in basso, a sinistra oa destra.
Quindi questo è margine.
Quindi a volte aggiungiamo valori
a tutti i lati del margine, ma non vogliamo doverlo fare con quattro linee diverse.
Quindi non vogliamo che
siano esattamente uguali se sono qui, ma non tutti dobbiamo dire margine margine superiore margine sinistro margine destro inferiore.
Quindi c'è un'altra scorciatoia come per il confine.
Oppure possiamo fare le cose contemporaneamente, possiamo fare questo margine e dargli quattro valori.
Quindi il primo è per la parte superiore e poi quella destra e poi quella inferiore.
Facciamo 500 pixel e poi a sinistra e ottenendo questo
bel margine a quattro
lati dove i valori sono tutti diversi, ma dovevamo fare solo una riga.
Quindi, solo per ispezionare questo
qui e vedere se otteniamo i 500 pixel sul fondo, il 20 in alto otteniamo il centinaio a sinistra e poi abbiamo i nostri 40 a destra.
Quindi c'è un'ultima cosa che vedrai spesso con margine che è margine.
Auto.
Quindi quello che possiamo fare è impostare il margine in modo che sia automatico a sinistra oa destra.
E ciò che farà in realtà è centrare un elemento per noi.
Quindi lascia che ti mostri come funziona.
zero e inferiore e auto a sinistra.
E il commento è di nuovo fuori e possiamo scrivere margine e diciamo solo zero margine sulla parte superiore automatica a sinistra o a destra margine
E se lo faccio a grandezza naturale e lo aggiorno, vedrai che è il centro delle cose per noi.
Quindi, ciò significa che è stato deciso che questo è del 50 percento
perché abbiamo detto che qui e poi si nota che la sinistra è automatica e che la destra è
automatica, quindi fa tutto quello che deve fare e che in realtà la centrerà per noi.
E poi abbiamo zero in alto e in basso in modo che siano accartocciati insieme.
Quello che possiamo anche fare è un modo ancora più breve per farlo e sembra che questo margine zero sia Otto.
E così questo imposterà la parte superiore e inferiore per azzerare la sinistra e la destra in automatico.
Quindi nulla cambia e possiamo anche usare questa sintassi se
voglio aggiungere 50 pixel in alto e auto o voglio aggiungere 50 pixel e 20 pixel.
L'unica cosa da ricordare è che hai bisogno della x lì a meno che il numero sia zero.
Quindi se faccio questo aggiunge 20 in alto a sinistra e a destra e poi aggiunge 50 in alto e in basso.
Ricapitoliamo qui ancora una volta.
Abbiamo il contenuto interiore che è proprio qui.
Abbiamo padding che si trova tra i confini, quindi tutto quello che abbiamo è
il padding a sinistra e poi abbiamo il margine che si trova tra il confine e sull'altro lato.
Quindi tra gli elementi in fondo.
Quindi nei prossimi video applicheremo questi concetti e li useremo durante questo corso