Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,510 --> 00:00:01,620
Ben tornato.
2
00:00:01,830 --> 00:00:05,940
In questo video voglio parlare del modello di scatola in CSS.
3
00:00:05,940 --> 00:00:10,350
È un concetto molto importante ed è qualcosa di cui potresti essere stato curioso
4
00:00:10,350 --> 00:00:14,490
nella parte posteriore della tua testa, e questa è questa immagine proprio qui.
5
00:00:15,190 --> 00:00:24,110
In CSS abbiamo questa idea del modello di scatola che ha il contenuto, ha il riempimento, il bordo che abbiamo visto prima
6
00:00:24,110 --> 00:00:24,980
e
7
00:00:24,980 --> 00:00:25,980
quindi il margine.
8
00:00:26,150 --> 00:00:27,970
Quindi ne parleremo in questo video.
9
00:00:28,100 --> 00:00:35,390
Quindi al momento non abbiamo il nostro sito Web così carino, ma ho lasciato, intenzionalmente, la nostra pagina di accesso ancora vuota e vedi
10
00:00:35,390 --> 00:00:40,870
che non ci sono stili applicati perché se andiamo alla pagina di accesso e la trascinerò qui fa
11
00:00:40,880 --> 00:00:47,780
riferimento a "style2" che non ha molti stili in corso. Per enfatizzare davvero questo punto,
12
00:00:47,810 --> 00:00:48,860
volevo
13
00:00:48,860 --> 00:01:01,560
solo creare un "div" al posto del "Lorem Ipsum". Se do a questa una 'classe' di 'boxmodel' posso
14
00:01:02,220 --> 00:01:15,630
entrare nel mio 'style2' che trascinerò qui e posso dire '. boxmodel '' border: 5px solid red 'I save
15
00:01:15,980 --> 00:01:18,570
this and refresh.
16
00:01:18,580 --> 00:01:22,270
Ok, quindi abbiamo il nostro modello di scatola. Aggiungiamo qualcosa in questo 'div'.
17
00:01:23,670 --> 00:01:24,930
Noi abbiamo un'.
18
00:01:25,080 --> 00:01:28,170
E in questo momento sta coprendo l'intero spazio.
19
00:01:28,170 --> 00:01:39,450
Ma se avessimo altre tre "div", chiameremo questa "B" la successiva "C" che salverò e aggiornerò.
20
00:01:39,990 --> 00:01:41,980
OK, abbiamo questi,
21
00:01:42,060 --> 00:01:51,300
e se li volessimo tutti in una riga, potresti ricordare che si trattava di "display: blocco in linea" e
22
00:01:51,300 --> 00:01:55,070
io li salvavo, li aggiorna e li abbiamo.
23
00:01:55,380 --> 00:01:57,430
OK, parliamo del modello di scatola qui.
24
00:01:57,440 --> 00:02:01,820
Diciamo che volevamo più spazio all'interno di questi per le lettere.
25
00:02:02,210 --> 00:02:09,680
Bene, in quel caso possiamo usare qualcosa di simile al 'padding', così il padding posso mettere 20 pixel [padding: 20px], salvare e aggiornare e
26
00:02:10,520 --> 00:02:11,790
c'è il nostro padding.
27
00:02:12,170 --> 00:02:18,380
Ma supponiamo di volere imbottiture diverse in modo che i lati siano più larghi di quelli superiori.
28
00:02:18,410 --> 00:02:27,380
In tal caso possiamo fare qualcosa come cinque pixel in alto, 20 pixel a destra, 5 pixel
29
00:02:27,440 --> 00:02:31,340
in basso e 20 pixel a sinistra.
30
00:02:31,360 --> 00:02:34,650
Mi aggiorno e lo guardo.
31
00:02:34,870 --> 00:02:40,430
E questo è solo uno standard a cui dovrai abituarti in alto, a destra, in basso '(e) a sinistra.
32
00:02:40,450 --> 00:02:47,340
Puoi anche effettivamente eseguire il riempimento come puoi vedere nel menu a discesa in basso, a sinistra, in alto, a destra per specificare.
33
00:02:47,500 --> 00:02:49,310
Ma questo è un modo più veloce di farlo.
34
00:02:49,390 --> 00:02:52,780
Se ricordi che ce n'è un altro e quello era "margine".
35
00:02:53,200 --> 00:02:59,200
Quindi il margine ci consente di creare spazio al di fuori del confine.
36
00:02:59,320 --> 00:03:07,940
Quindi se vado '20px' qui e salvo, aggiorna puoi vedere che abbiamo creato 20 pixel sul lato sinistro e destro ma
37
00:03:07,940 --> 00:03:10,870
anche in alto e in basso.
38
00:03:10,880 --> 00:03:16,390
Diciamo che vogliamo solo spazi tra le scatole ma non in alto e in basso.
39
00:03:16,570 --> 00:03:18,840
Bene, di nuovo lo stesso principio.
40
00:03:18,860 --> 00:03:26,460
Possiamo fare 0 pixel, 20 pixel, 0 pixel e 20 pixel.
41
00:03:26,460 --> 00:03:31,410
Quindi in alto, a destra, in basso (e) a sinistra, salva e aggiorna.
42
00:03:31,410 --> 00:03:32,330
Ecco qua
43
00:03:32,340 --> 00:03:34,540
Ora questo potrebbe diventare noioso.
44
00:03:34,540 --> 00:03:39,570
C'è un altro modo abbreviato e puoi rimuoverlo.
45
00:03:39,600 --> 00:03:43,640
Quindi questo significa in alto e in basso, questo significa sinistra e destra.
46
00:03:43,710 --> 00:03:45,300
Lo salvo e aggiorno.
47
00:03:45,300 --> 00:03:47,240
Niente dovrebbe cambiare e non lo fa.
48
00:03:47,340 --> 00:03:49,730
E possiamo fare lo stesso anche qui in alto.
49
00:03:53,040 --> 00:03:53,890
Perfezionare.
50
00:03:53,910 --> 00:03:58,950
Un'ultima cosa che voglio mostrarti è che se apriamo i nostri strumenti per sviluppatori.
51
00:03:58,950 --> 00:04:01,220
Quindi di nuovo "ispezioniamo".
52
00:04:01,470 --> 00:04:06,510
Vedrai nei nostri stili che abbiamo il nostro modello di scatola.
53
00:04:06,510 --> 00:04:15,140
Quindi, se vedi qui abbiamo i nostri contenuti, abbiamo la nostra imbottitura e dice 20 pixel, 5 pixel, 5 pixel.
54
00:04:15,300 --> 00:04:23,250
Abbiamo il nostro bordo 5 pixel, 5 pixel, 5 pixel, 5 pixel e quindi il nostro margine, 0 con 20
55
00:04:23,250 --> 00:04:24,620
(pixel) sul lato.
56
00:04:24,630 --> 00:04:31,550
Quindi di nuovo Chrome ti consente di navigare e assicurarti che tutti questi siano eseguiti correttamente.
57
00:04:31,560 --> 00:04:36,580
L'ultima cosa che potresti chiedere è: cosa posso dire di questo contenuto?
58
00:04:36,630 --> 00:04:46,560
Ed è molto semplice puoi fare qualcosa come 'larghezza', facciamo '33px' salva e aggiorna e fai anche
59
00:04:47,040 --> 00:04:56,520
'altezza', fai '55px' salva e aggiorna e vedrai qui che nel nostro modello di scatola ora
60
00:04:56,520 --> 00:05:01,970
abbiamo il contenuto con 33 pixel per 55 pixel.
61
00:05:02,030 --> 00:05:03,680
Va bene, per ora è tutto.
62
00:05:03,770 --> 00:05:04,910
Ci vediamo al prossimo.
63
00:05:04,920 --> 00:05:05,200
Ciao ciao
6297
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Cebuano
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
Esperanto
Estonian
Finnish
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hawaiian
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Khmer
Korean
Kurdish (Kurmanji)
Kyrgyz
Lao
Latvian
Lithuanian
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mongolian
Myanmar (Burmese)
Nepali
Norwegian
Pashto
Polish
Portuguese
Romanian
Russian
Samoan
Serbian
Sesotho
Shona
Sinhala
Slovak
Slovenian
Somali
Spanish
Swahili
Swedish
Tajik
Thai
Turkish
Ukrainian
Urdu
Uzbek
Vietnamese
