1
00:00:00,840 --> 00:00:06,090
Quindi uno dei concetti più importanti che dobbiamo ancora esaminare e valutare è il posizionamento degli elementi.

2
00:00:06,600 --> 00:00:10,290
Quindi, come possiamo creare una pagina o spostare un div in alto a destra.

3
00:00:10,410 --> 00:00:15,720
O come possiamo rendere più ampio un tag di ancoraggio o aggiungere spazi tra le immagini.

4
00:00:15,780 --> 00:00:20,110
Tutto ciò è molto importante ed è tutto collegato a qualcosa chiamato il modello di box.

5
00:00:20,220 --> 00:00:26,820
Quindi il modello di scatola è questa idea di base che è davvero centrale in tutto ciò che in HD

6
00:00:26,820 --> 00:00:31,190
si valuta, cioè che praticamente ogni elemento ha una scatola rettangolare attorno ad esso.

7
00:00:31,680 --> 00:00:38,040
Quindi possiamo vedere qui solo andando a qualsiasi pagina web su MDA e ho l'ispettore aperto e ho

8
00:00:38,040 --> 00:00:39,620
selezionato la lente d'ingrandimento.

9
00:00:40,010 --> 00:00:44,810
E mentre sorvolo su ogni elemento, puoi vedere che c'è una scatola attorno ad esso.

10
00:00:44,910 --> 00:00:48,180
Quindi questo H2 ha una scatola blu attorno ad esso.

11
00:00:48,180 --> 00:00:49,810
Questo ha una scatola.

12
00:00:50,130 --> 00:00:53,370
Anche le cose che non sono particolarmente squadrate.

13
00:00:53,490 --> 00:00:56,320
Quindi questo div angolo arrotondato. Ha ancora una scatola attorno ad esso.

14
00:00:56,490 --> 00:00:58,080
Dietro le quinte.

15
00:00:58,080 --> 00:00:59,310
Quindi questo qui e

16
00:00:59,520 --> 00:01:05,790
questo non è davvero rotondo o non squadrato per avere questi angoli arrotondati ma è ancora una scatola.

17
00:01:05,820 --> 00:01:09,130
Quindi queste scatole sono davvero utili dietro le quinte perché possiamo disegnare su di esse proprietà differenti.

18
00:01:09,240 --> 00:01:14,940
Quindi ci sono quattro proprietà o quattro parti diverse di ogni scatola.

19
00:01:15,870 --> 00:01:19,350
Ci sono molte più proprietà ma per parti della scatola che possiamo manipolare.

20
00:01:19,350 --> 00:01:23,550
Quindi supponiamo che questo diagramma che è anche da MDA e sia di un paragrafo.

21
00:01:23,610 --> 00:01:29,790
Quindi ho un testo in un paragrafo e gli do un bordo arancione o giallo e questo è ciò che l'utente vede

22
00:01:29,790 --> 00:01:35,010
del testo e un bordo ma dietro le quinte ci sono in realtà alcune altre cose che accadono.

23
00:01:35,010 --> 00:01:42,210
Quindi tra il confine e il testo c'è qualcosa chiamato padding.

24
00:01:42,360 --> 00:01:47,920
Quindi il riempimento è solo lo spazio all'interno del bordo.

25
00:01:48,000 --> 00:01:51,040
Quindi tra il contenuto e il bordo è il padding

26
00:01:51,190 --> 00:01:56,730
e poi c'è anche il margine che si trova dall'altra parte tra il confine esterno e qualsiasi altra cosa.

27
00:01:56,730 --> 00:02:01,060
Quindi usiamo il margine spesso per aggiungere la spaziatura tra gli elementi.

28
00:02:01,170 --> 00:02:04,720
Quindi, se avessimo due paragrafi e volessi

29
00:02:04,860 --> 00:02:10,470
che fossero più distanti, allora userei il margine e aumenterei quello.

30
00:02:10,470 --> 00:02:11,340
Quindi ora faremo

31
00:02:11,880 --> 00:02:16,380
un po 'di approfondimento sulla sintassi di alcune delle proprietà che vogliamo usare prima di farlo.

32
00:02:16,380 --> 00:02:18,700
un modo per creare qualcosa che assomigli a questo.

33
00:02:18,720 --> 00:02:24,000
Voglio solo mostrarti due cose che puoi guardare avanti per rendere il primo dei più eccitanti, ma l'importante è che ora abbiamo

34
00:02:24,330 --> 00:02:29,870
Fino ad ora non abbiamo in realtà un modo per rendere queste scatole connesse l'una con

35
00:02:29,880 --> 00:02:34,500
l'altra che hanno un assegnato a loro ma sono vuote, non c'è testo all'interno.

36
00:02:34,500 --> 00:02:39,330
Quindi impareremo a conoscere il modello di scatola e applicheremo qui per

37
00:02:39,330 --> 00:02:46,260
fare questo tic tac toe board e quindi faremo questo sito portfolio per un fotografo immaginario.

38
00:02:46,260 --> 00:02:50,830
Quindi questo è bello.

39
00:02:51,450 --> 00:02:52,350
Le sue immagini sono reattive, quindi cambiano le dimensioni e cambiano le dimensioni della finestra e la griglia.

40
00:02:52,420 --> 00:03:00,690
Tutto questo si basa sui concetti che imparerai qui.

41
00:03:00,750 --> 00:03:04,270
Quindi ho intenzione di andare avanti e aprire qui sublime.

42
00:03:04,710 --> 00:03:07,020
E ho un documento davvero semplice che ho creato.

43
00:03:07,560 --> 00:03:10,510
Quindi è solo un semplice HTML.

44
00:03:10,740 --> 00:03:12,600
Ha un foglio di stile collegato.

45
00:03:12,660 --> 00:03:14,670
È vuoto.

46
00:03:14,700 --> 00:03:15,330
A parte alcuni commenti e poi due paragrafi.

47
00:03:15,330 --> 00:03:18,930
Quindi, se lo apro, puoi vedere che

48
00:03:18,930 --> 00:03:25,620
è molto semplice e noioso lo useremo per giocare con il modello di box.

49
00:03:25,620 --> 00:03:27,660
Quindi andrò al mio

50
00:03:28,860 --> 00:03:35,910
successo e selezionerò i paragrafi e poi copierò questi commenti all'interno in modo che possa

51
00:03:35,910 --> 00:03:41,940
scrivere del codice sotto di essi solo per dirti visivamente cosa sto facendo.

52
00:03:41,940 --> 00:03:43,370
Quindi iniziamo dando a questi un confine.

53
00:03:43,380 --> 00:03:45,740
Quindi questo dovrebbe essere il bordo

54
00:03:45,900 --> 00:03:54,450
di revisione e facciamo il pixel blu solido che si aggiorna e si vede che otteniamo un bordo intorno al contenuto.

55
00:03:54,450 --> 00:03:57,630
E quello che noti anche è che il contenuto qui va fino in fondo allo schermo.

56
00:03:57,630 --> 00:04:02,360
un paragrafo per default, esso attraversa tutto lo schermo.

57
00:04:02,370 --> 00:04:08,460
Il nostro confine non si ferma qui ed è perché quando facciamo

58
00:04:08,460 --> 00:04:09,620
Quindi, se voglio

59
00:04:09,630 --> 00:04:20,210
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.

60
00:04:20,220 --> 00:04:23,260
Facciamo 200 pixel per iniziare.

61
00:04:23,490 --> 00:04:25,390
E se aggiorno, puoi vedere che ora abbiamo cambiato la larghezza.

62
00:04:25,890 --> 00:04:29,190
Se ispeziono il contenuto non è blu.

63
00:04:29,190 --> 00:04:34,920
E poi abbiamo un confine attorno ad esso.

64
00:04:35,940 --> 00:04:37,840
Quindi il contenuto è blu.

65
00:04:38,310 --> 00:04:39,700
E su questo diagramma c'è questa scatola proprio qui questa scatola degli elementi.

66
00:04:40,110 --> 00:04:45,350
E poi abbiamo un confine che lo circonda direttamente.

67
00:04:45,630 --> 00:04:48,330
Non c'è spazio tra il confine e il contenuto.

68
00:04:48,330 --> 00:04:52,020
Un'altra cosa con la larghezza e anche c'è un'altezza.

69
00:04:52,020 --> 00:04:56,920
Facciamo quindi un'altezza di 300 pixel e vediamo che abbiamo appena aggiunto un po 'di spazio.

70
00:04:57,060 --> 00:05:02,360
Ho intenzione di sbarazzarmene, ma c'è un'altezza che possiamo usare come con.

71
00:05:02,370 --> 00:05:06,620
Non dobbiamo usare solo i pixel, quindi possiamo usare le percentuali.

72
00:05:06,930 --> 00:05:11,760
E quelli sono davvero utili quindi lascia che ti mostri.

73
00:05:13,890 --> 00:05:15,780
Facciamo il 50 percento e potresti chiederti che cos'è il 50 percento di.

74
00:05:15,810 --> 00:05:23,310
E la risposta è che è il 50 percento dell'elemento genitore.

75
00:05:23,310 --> 00:05:27,290
Quindi in questo caso è il corpo

76
00:05:27,300 --> 00:05:34,230
che il paragrafo è all'interno del paragrafo che attraversa metà del corpo.

77
00:05:34,230 --> 00:05:35,240
Nel nostro caso il corpo è l'intera pagina.

78
00:05:35,310 --> 00:05:37,390
Era tutto finito.

79
00:05:37,410 --> 00:05:38,240
Quindi finiamo con metà pagina.

80
00:05:38,250 --> 00:05:40,620
in questa griglia di immagini.

81
00:05:40,800 --> 00:05:51,870
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

82
00:05:51,900 --> 00:05:54,890
Puoi vedere che le immagini cambiano la loro larghezza e questa è una percentuale.

83
00:05:55,280 --> 00:05:59,490
OK, lo manterrò così per ora.

84
00:06:00,040 --> 00:06:04,590
E poi la prossima proprietà di cui parleremo è il padding

85
00:06:04,770 --> 00:06:10,080
e ricorda che il padding è questo spazio tra l'elemento e il bordo.

86
00:06:10,080 --> 00:06:11,600
E proprio adesso non abbiamo nessuno spazio in cima ai bordi.

87
00:06:11,750 --> 00:06:15,410
Quindi c'è una proprietà chiamata padding e

88
00:06:15,840 --> 00:06:21,570
possiamo dargli un numero di pixel e facciamo 10 pixel per iniziare.

89
00:06:21,570 --> 00:06:22,120
Salva l'aggiornamento del file.

90
00:06:22,230 --> 00:06:25,130
E ora abbiamo 10 pixel di imbottitura su tutti i lati.

91
00:06:25,410 --> 00:06:28,700
Quindi se ispeziono ora vedrai che ora c'è

92
00:06:29,040 --> 00:06:36,660
questo contenuto verde che è stato introdotto, quindi abbiamo il contenuto blu stesso e poi abbiamo il verde attorno

93
00:06:37,080 --> 00:06:45,390
ad esso che è tra il confine e il contenuto, quindi possiamo ovviamente incrementarlo e otteniamo molto più spazio all'interno.

94
00:06:45,380 --> 00:06:49,760
Ma questo non è l'unico modo per impostare il padding.

95
00:06:50,490 --> 00:06:52,890
Questo lo imposta su tutti e quattro i lati come esattamente lo stesso.

96
00:06:52,920 --> 00:06:57,250
Ma a volte vogliamo solo il riempimento su un lato o due lati proprio come con il bordo.

97
00:06:57,380 --> 00:07:01,760
Esistono scorciatoie per la versione più lunga in cui è un bordo superiore di 10 pixel con il bordo inferiore di cinque pixel.

98
00:07:01,800 --> 00:07:09,510
Stessa cosa con il padding e lo commenta e possiamo fare

99
00:07:09,900 --> 00:07:17,940
qualcosa come il padding a sinistra di 40 pixel e fresco.

100
00:07:19,440 --> 00:07:20,270
E abbiamo imbottiture proprio qui.

101
00:07:20,520 --> 00:07:22,090
E questo è l'unico posto per il riempimento.

102
00:07:22,320 --> 00:07:24,250
E ricordo lo spazio qui sopra

103
00:07:24,330 --> 00:07:29,640
questo blu non è il riempimento che è il suo vero contenuto che è da qui con qui.

104
00:07:29,630 --> 00:07:30,830
Così diverso anche se sembra che ci sia spazio a destra.

105
00:07:30,990 --> 00:07:33,610
Viene da un posto diverso.

106
00:07:33,620 --> 00:07:35,930
Quindi un'altra cosa che possiamo fare qui è giocare con il margine.

107
00:07:37,170 --> 00:07:40,920
Quindi il margine è un ultimo pezzo del puzzle.

108
00:07:41,160 --> 00:07:43,780
È lo spazio all'esterno del confine.

109
00:07:43,860 --> 00:07:45,900
Quindi tra gli elementi.

110
00:07:45,900 --> 00:07:47,980
Quindi questo sarà utile perché potremmo voler

111
00:07:48,450 --> 00:07:54,620
incrementare o aumentare questo spazio proprio qui o come esempio qui questo spazio proprio qui tra le immagini viene impostato usando Marjan.

112
00:07:54,620 --> 00:08:01,280
e facciamo qualcosa di ovvio come 100 pixel da avviare e aggiornare.

113
00:08:01,500 --> 00:08:07,090
Quindi sembra proprio come il padding, quindi possiamo dire margine

114
00:08:07,110 --> 00:08:10,240
E quello che è successo è che ora

115
00:08:10,410 --> 00:08:15,810
abbiamo 100 pixel di spazio su tutti i lati dell'elemento all'esterno del confine.

116
00:08:15,810 --> 00:08:17,100
Quindi trova l'aspetto.

117
00:08:18,240 --> 00:08:19,360
Vedrai che in

118
00:08:19,980 --> 00:08:26,910
Chrome è identificato come arancione, quindi il blu è il contenuto Verde è il riempimento in Arancione è il margine.

119
00:08:27,000 --> 00:08:28,710
Quindi, proprio come il padding.

120
00:08:28,800 --> 00:08:30,030
superiore a 500 pixel.

121
00:08:30,030 --> 00:08:36,050
A volte vogliamo solo impostare una parte del margine su un lato in modo che possiamo fare qualcosa come margine

122
00:08:36,690 --> 00:08:38,890
E poi quando arrivano a questo

123
00:08:38,900 --> 00:08:45,000
fuori per ora e salvano e abbiamo solo spazio in alto a sinistra non c'è niente.

124
00:08:45,000 --> 00:08:46,070
E poi più spazio in cima a questo.

125
00:08:46,160 --> 00:08:48,180
Niente in basso, a sinistra oa destra.

126
00:08:48,170 --> 00:08:50,480
Quindi questo è margine.

127
00:08:50,610 --> 00:08:52,710
Quindi a volte aggiungiamo valori

128
00:08:52,710 --> 00:08:58,500
a tutti i lati del margine, ma non vogliamo doverlo fare con quattro linee diverse.

129
00:08:58,500 --> 00:08:59,510
Quindi non vogliamo che

130
00:08:59,660 --> 00:09:04,110
siano esattamente uguali se sono qui, ma non tutti dobbiamo dire margine margine superiore margine sinistro margine destro inferiore.

131
00:09:04,200 --> 00:09:06,500
Quindi c'è un'altra scorciatoia come per il confine.

132
00:09:06,570 --> 00:09:09,550
Oppure possiamo fare le cose contemporaneamente, possiamo fare questo margine e dargli quattro valori.

133
00:09:09,570 --> 00:09:14,780
Quindi il primo è per la parte superiore e poi quella destra e poi quella inferiore.

134
00:09:14,820 --> 00:09:21,300
Facciamo 500 pixel e poi a sinistra e ottenendo questo

135
00:09:21,750 --> 00:09:24,330
bel margine a quattro

136
00:09:27,570 --> 00:09:35,550
lati dove i valori sono tutti diversi, ma dovevamo fare solo una riga.

137
00:09:35,550 --> 00:09:36,820
Quindi, solo per ispezionare questo

138
00:09:37,290 --> 00:09:44,190
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.

139
00:09:44,180 --> 00:09:49,920
Quindi c'è un'ultima cosa che vedrai spesso con margine che è margine.

140
00:09:50,010 --> 00:09:53,790
Auto.

141
00:09:53,790 --> 00:09:54,480
Quindi quello che possiamo fare è impostare il margine in modo che sia automatico a sinistra oa destra.

142
00:09:54,780 --> 00:09:59,340
E ciò che farà in realtà è centrare un elemento per noi.

143
00:09:59,370 --> 00:10:02,550
Quindi lascia che ti mostri come funziona.

144
00:10:02,550 --> 00:10:04,570
zero e inferiore e auto a sinistra.

145
00:10:04,710 --> 00:10:12,870
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

146
00:10:12,870 --> 00:10:18,390
E se lo faccio a grandezza naturale e lo aggiorno, vedrai che è il centro delle cose per noi.

147
00:10:18,510 --> 00:10:23,520
Quindi, ciò significa che è stato deciso che questo è del 50 percento

148
00:10:23,520 --> 00:10:30,740
perché abbiamo detto che qui e poi si nota che la sinistra è automatica e che la destra è

149
00:10:30,750 --> 00:10:36,810
automatica, quindi fa tutto quello che deve fare e che in realtà la centrerà per noi.

150
00:10:36,810 --> 00:10:37,880
E poi abbiamo zero in alto e in basso in modo che siano accartocciati insieme.

151
00:10:37,980 --> 00:10:41,540
Quello che possiamo anche fare è un modo ancora più breve per farlo e sembra che questo margine zero sia Otto.

152
00:10:41,930 --> 00:10:47,940
E così questo imposterà la parte superiore e inferiore per azzerare la sinistra e la destra in automatico.

153
00:10:48,540 --> 00:10:53,470
Quindi nulla cambia e possiamo anche usare questa sintassi se

154
00:10:53,580 --> 00:11:01,380
voglio aggiungere 50 pixel in alto e auto o voglio aggiungere 50 pixel e 20 pixel.

155
00:11:01,380 --> 00:11:04,700
L'unica cosa da ricordare è che hai bisogno della x lì a meno che il numero sia zero.

156
00:11:04,740 --> 00:11:09,830
Quindi se faccio questo aggiunge 20 in alto a sinistra e a destra e poi aggiunge 50 in alto e in basso.

157
00:11:10,430 --> 00:11:17,720
Ricapitoliamo qui ancora una volta.

158
00:11:18,780 --> 00:11:21,070
Abbiamo il contenuto interiore che è proprio qui.

159
00:11:21,120 --> 00:11:25,370
Abbiamo padding che si trova tra i confini, quindi tutto quello che abbiamo è

160
00:11:25,830 --> 00:11:31,290
il padding a sinistra e poi abbiamo il margine che si trova tra il confine e sull'altro lato.

161
00:11:31,430 --> 00:11:33,440
Quindi tra gli elementi in fondo.

162
00:11:33,450 --> 00:11:35,530
Quindi nei prossimi video applicheremo questi concetti e li useremo durante questo corso

163
00:11:35,610 --> 00:11:40,150