1
00:00:00,840 --> 00:00:06,440
Dus een van de belangrijkste begrippen die we nog te dekken en te beoordelen positioneert elementen.

2
00:00:06,600 --> 00:00:10,290
Dus hoe kunnen we lay-out van een pagina of verplaatsen van een div naar de rechterbovenhoek.

3
00:00:10,410 --> 00:00:15,720
Of hoe maken we een anker tag breder of voeg afstand tussen beelden.

4
00:00:15,780 --> 00:00:20,110
Dat alles is echt belangrijk en het is allemaal gerelateerd aan iets genaamd de box model.

5
00:00:20,220 --> 00:00:31,190
Dus de box model is dit basisidee dat is echt dicht bij alles in HD beoordeelt u dat dat in principe elk element heeft een rechthoekige doos omheen.

6
00:00:31,680 --> 00:00:39,620
Dus we kunnen hier gewoon gaan naar een webpagina op de MDA en ik heb de inspecteur open en ik heb het vergrootglas geselecteerd.

7
00:00:40,010 --> 00:00:44,810
En als ik de muisaanwijzer over elk element kun je zien dat er een doos omheen.

8
00:00:44,910 --> 00:00:48,180
Dus dit H2 heeft een blauwe doos omheen.

9
00:00:48,180 --> 00:00:49,810
Deze heeft een doos.

10
00:00:50,130 --> 00:00:53,370
Zelfs dingen die niet bijzonder boxy.

11
00:00:53,490 --> 00:00:56,320
Dus dit afgeronde hoek div ..

12
00:00:56,490 --> 00:00:58,080
Het heeft nog steeds een doos omheen.

13
00:00:58,080 --> 00:00:59,310
Achter de schermen.

14
00:00:59,520 --> 00:01:09,130
Dus doet dit hier en dit is echt niet rond of niet boxy op zoek naar deze afgeronde hoeken hebben, maar het is nog steeds een doos.

15
00:01:09,240 --> 00:01:15,870
Dus deze dozen echt bruikbaar zijn achter de schermen, want we verschillende eigenschappen kunnen stylen op hen.

16
00:01:15,870 --> 00:01:19,350
Er zijn dus vier eigenschappen of vier verschillende delen van elke doos.

17
00:01:19,350 --> 00:01:23,550
Er is veel meer eigenschappen, maar voor onderdelen van het vak dat we kunnen manipuleren.

18
00:01:23,610 --> 00:01:29,790
Dus laten we aannemen dat dit schema die ook uit MDA en is van een paragraaf.

19
00:01:29,790 --> 00:01:42,210
Dus ik heb wat tekst in een paragraaf en ik geef het een oranje of een gele rand en dit is wat de gebruiker een tekst en een rand ziet, maar achter de schermen is er eigenlijk een aantal andere dingen gebeuren.

20
00:01:42,360 --> 00:01:47,920
Dus tussen de grens en de tekst er is zoiets als opvulling.

21
00:01:48,000 --> 00:01:51,040
Dus padding is gewoon de ruimte aan de binnenzijde van de rand.

22
00:01:51,190 --> 00:02:01,060
Dus tussen de inhoud en de grens is opvulling en dan is er ook de marge die aan de andere kant is het tussen de grens aan de buitenkant en iets anders.

23
00:02:01,170 --> 00:02:04,720
Dus maken we gebruik van de marge vaak afstand tussen elementen toe te voegen.

24
00:02:04,860 --> 00:02:11,340
Dus als we hadden twee alinea's en ik wilde dat ze verder uit elkaar te zijn dan zou ik marge te gebruiken en te verhogen dat.

25
00:02:11,880 --> 00:02:18,700
Dus nu gaan we een beetje een diepe duik te doen in feite de syntax van een aantal van de eigenschappen die we willen gebruiken voordat we dat doen.

26
00:02:18,720 --> 00:02:29,870
Ik wil gewoon laten zien twee dingen die je kunt uitkijken naar het maken van de eerste een van de meest spannende, maar wat belangrijk is, is dat we nu een manier van het maken van iets dat er zo uitziet.

27
00:02:29,880 --> 00:02:39,330
Tot nu toe hebben we eigenlijk geen manier om deze dozen die met elkaar verbonden dat een hebben toegewezen maar ze leeg zijn er geen tekst binnen.

28
00:02:39,330 --> 00:02:50,830
Dus we gaan om te leren over het vak model en toe te passen die hier op deze Tic Tac Toe board maken en dan gaan we deze portfolio site te maken voor een fictieve fotograaf.

29
00:02:51,450 --> 00:02:52,350
Dus dit is leuk.

30
00:02:52,420 --> 00:03:00,690
Het is images het reageert zo verandert de grootte van een verandering het raam grootte en het raster.

31
00:03:00,750 --> 00:03:04,270
Dit alles is gebaseerd off van de concepten je gaat om hier te leren.

32
00:03:04,710 --> 00:03:07,020
Dus ik ga om verder te gaan en open sublieme hier.

33
00:03:07,560 --> 00:03:10,510
En ik heb een heel eenvoudig document dat ik heb gemaakt.

34
00:03:10,740 --> 00:03:12,600
Dus het is gewoon simpel HTML.

35
00:03:12,660 --> 00:03:14,670
Het heeft een style sheet aangesloten.

36
00:03:14,700 --> 00:03:15,330
Het is leeg.

37
00:03:15,330 --> 00:03:18,930
Afgezien van een paar opmerkingen en dan twee alinea's.

38
00:03:18,930 --> 00:03:27,660
Dus als ik deze open te stellen kun je zien dat het heel basic erg saai en we gaan gewoon om dit te gebruiken om te spelen met de box model.

39
00:03:28,860 --> 00:03:43,370
Dus ik ga naar mijn succes en ik ga naar de punten te selecteren en vervolgens Ik ga gewoon op deze opmerkingen binnen te kopiëren, zodat ik wat code onder hen alleen maar om u visueel te vertellen wat ik doe kan schrijven.

40
00:03:43,380 --> 00:03:45,740
Dus laten we beginnen met het geven van deze grens.

41
00:03:45,900 --> 00:03:57,630
Dus moet deze beoordeling grens te zijn en laten we het doen om pixel stevige blauwe behalve dat refresh en je kunt zien dat we een grens helemaal rond de inhoud.

42
00:03:57,630 --> 00:04:02,360
En wat je ook merken is dat de inhoud gaat helemaal over het scherm.

43
00:04:02,370 --> 00:04:09,620
Onze grens doet hier niet stoppen en dat is omdat wanneer we een paragraaf standaard is gaat helemaal over het scherm.

44
00:04:09,630 --> 00:04:23,260
Dus als ik wil de breedte van de paragraaf zelf van de tekst kan ik de breedte eigendom te gebruiken en ik ga om verder te gaan en geven een breedte van één te veranderen.

45
00:04:23,490 --> 00:04:25,390
Laten we 200 pixels om te beginnen.

46
00:04:25,890 --> 00:04:29,190
En als ik refresh je kunt zien dat we nu veranderd de breedte.

47
00:04:29,190 --> 00:04:34,920
Als ik inspecteer de inhoud is niet blauw.

48
00:04:35,940 --> 00:04:37,840
En dan hebben we een rand er omheen.

49
00:04:38,310 --> 00:04:39,700
Dus de inhoud is blauw.

50
00:04:40,110 --> 00:04:45,350
En op dit schema, dat is dit vakje hier dit element vak.

51
00:04:45,630 --> 00:04:48,330
En dan hebben we een grens die direct omheen.

52
00:04:48,330 --> 00:04:52,020
Er is geen ruimte tussen de rand en de inhoud.

53
00:04:52,020 --> 00:04:56,920
Een ander ding met de breedte en ook is er een hoogte.

54
00:04:57,060 --> 00:05:02,360
Dus laten we een hoogte van 300 pixels en zien we hebben gewoon een stel ruimte toegevoegd.

55
00:05:02,370 --> 00:05:06,620
Ik ga om zich te ontdoen van die te krijgen, maar er is een hoogte die we kunnen gebruiken net als bij.

56
00:05:06,930 --> 00:05:11,760
We hoeven niet gewoon gebruik maken van pixels, zodat we percentages kunnen gebruiken.

57
00:05:13,890 --> 00:05:15,780
En die zijn echt nuttig dus laat me u tonen.

58
00:05:15,810 --> 00:05:23,310
Laten we het doen van 50 procent en u vraagt ​​zich misschien af ​​wat is dat 50 procent.

59
00:05:23,310 --> 00:05:27,290
Het antwoord is dat het 50 procent van het hoofdelement.

60
00:05:27,300 --> 00:05:35,240
Dus in dit geval is het orgaan dat de paragraaf is de binnenkant van de paragraaf gaat halverwege over het lichaam.

61
00:05:35,310 --> 00:05:37,390
In ons geval is het lichaam de hele pagina.

62
00:05:37,410 --> 00:05:38,240
Het was helemaal over.

63
00:05:38,250 --> 00:05:40,620
Dus eindigen we met de helft van de pagina.

64
00:05:40,800 --> 00:05:54,890
En wat is er leuk is aan dit als ik de venstergrootte verandert ook zo veel mensen gebruik maken van deze en zal gebruik maken van die daadwerkelijk te gebruiken in deze afbeelding raster.

65
00:05:55,280 --> 00:05:59,490
Je kunt zien dat de beelden de breedte te veranderen en dat is een percentage.

66
00:06:00,040 --> 00:06:04,590
OK, dus ik ga het zo te houden voor nu.

67
00:06:04,770 --> 00:06:11,600
En dan de volgende pand gaan we praten over vulling en vergeet niet padding is deze ruimte tussen het element en de grens.

68
00:06:11,750 --> 00:06:15,410
En op dit moment hebben we geen ruimte hebben de grenzen bovenop.

69
00:06:15,840 --> 00:06:22,120
Dus er is een eigenschap padding en we kunnen het geven van een aantal pixels en laten we het doen 10 pixels te beginnen.

70
00:06:22,230 --> 00:06:25,130
Sla het bestand op refresh.

71
00:06:25,410 --> 00:06:28,700
En nu hebben we 10 pixels van padding aan alle kanten.

72
00:06:29,040 --> 00:06:49,760
Dus als ik nu inspecteer je zult zien is er nu dit groene inhoud dat zo is introduceerden we de blauwe content zelf en dan hebben we het groen eromheen dat tussen de grens en de inhoud zodat we uiteraard deze verhogen en we krijgen veel meer ruimte aan de binnenkant.

73
00:06:50,490 --> 00:06:52,890
Maar dit is niet de enige manier om opvulling te stellen.

74
00:06:52,920 --> 00:06:57,250
Dit stelt het op alle vier zijden precies hetzelfde.

75
00:06:57,380 --> 00:07:01,760
Maar soms willen we alleen padding aan de ene kant of twee kanten, net als bij de grens.

76
00:07:01,800 --> 00:07:09,830
Er zijn short cuts voor de langere versie waar het een rand top 10 pixels rand onderaan vijf pixels.

77
00:07:09,900 --> 00:07:20,270
Hetzelfde met padding en het commentaar dat uit en we kunnen doen zoiets als opvulling links 40 pixels en fris.

78
00:07:20,520 --> 00:07:22,090
En we krijgen padding hier.

79
00:07:22,320 --> 00:07:24,250
En dat is de enige plek voor padding is.

80
00:07:24,330 --> 00:07:30,830
En ik herinner me de ruimte hier deze blauwe is niet de opvulling dat is haar werkelijke inhoud die uit deze met hier.

81
00:07:30,990 --> 00:07:33,610
Zo anders, hoewel het lijkt erop dat er ruimte aan de rechterkant.

82
00:07:33,620 --> 00:07:35,930
Het komt van een andere plaats.

83
00:07:37,170 --> 00:07:40,920
Dus een ander ding dat we hier kunnen doen is spelen met de marge.

84
00:07:41,160 --> 00:07:43,780
Dus de marge is een laatste stukje van de puzzel.

85
00:07:43,860 --> 00:07:45,900
Het is de ruimte aan de buitenzijde van de grens.

86
00:07:45,900 --> 00:07:47,980
Dus tussen de elementen.

87
00:07:48,450 --> 00:08:01,280
Dus dit gaat om bruikbaar te zijn, want we zouden willen verhogen of te verhogen deze ruimte hier of hier als voorbeeld deze ruimte hier in tussen de beelden wordt ingesteld met Marjan.

88
00:08:01,500 --> 00:08:10,240
Dus het eigenlijk ziet er net als padding zodat we marges kunnen zeggen en laten we iets voor de hand liggende, zoals 100 pixels te beginnen en te vernieuwen doen.

89
00:08:10,410 --> 00:08:17,100
En wat er is er nu 100 pixels ruimte aan alle zijden van het element aan de buitenzijde van de grens.

90
00:08:18,240 --> 00:08:19,360
Zo vinden aspect.

91
00:08:19,980 --> 00:08:28,710
Je zult zien dat in Chrome die is geïdentificeerd als oranje zo blauw is de inhoud Groen is de opvulling in Orange is de marge.

92
00:08:28,800 --> 00:08:30,030
Dus net als opvulling.

93
00:08:30,030 --> 00:08:38,890
Soms willen we slechts een deel van de marge ene kant zetten, zodat we kunnen doen zoiets als margin top is 500 pixels.

94
00:08:38,900 --> 00:08:46,070
En toen ze komen op dit één voor nu en op te slaan en we krijgen alleen ruimte op de top aan de linkerkant is er niets.

95
00:08:46,160 --> 00:08:48,180
En dan meer ruimte op de top van deze.

96
00:08:48,170 --> 00:08:50,480
Niets op de bodem of de linker- of de rechterkant.

97
00:08:50,610 --> 00:08:52,710
Dus dat is marge.

98
00:08:52,710 --> 00:08:59,510
Dus soms we om waarden toe te voegen aan alle kanten van de marge, maar we willen niet te hebben om het te doen met vier verschillende lijnen.

99
00:08:59,660 --> 00:09:06,500
Zodat we niet willen dat ze precies hetzelfde zijn als ze hier, maar we hebben niet allemaal te zeggen Grijprand marge marge rechtermarge bodem.

100
00:09:06,570 --> 00:09:09,550
Dus er is een andere snelkoppeling, net als voor de rand.

101
00:09:09,570 --> 00:09:14,780
Of we kunnen dingen tegelijk we deze marge kan doen en geef het vier waarden doen.

102
00:09:14,820 --> 00:09:21,300
Zodat de eerste is de top en dan rechts en onderaan.

103
00:09:21,750 --> 00:09:36,820
Laten we het doen 500 pixels en dan de linker en door te doen dat we dit mooie vierzijdige marge waarin de waarden zijn allemaal verschillend, maar we hadden alleen om te doen in één lijn.

104
00:09:37,290 --> 00:09:49,920
Dus alleen maar om dit hier te inspecteren en te zien als we de 500 pixels aan de onderkant is de 20 op de top krijgen we de honderd aan de linkerkant en dan hebben we onze 40 aan de rechterkant.

105
00:09:50,010 --> 00:09:53,790
Dus er is nog een laatste ding dat je ziet vaak met marge die marge.

106
00:09:53,790 --> 00:09:54,480
Auto.

107
00:09:54,780 --> 00:09:59,340
Dus wat we kunnen doen is de marge op auto op de links of rechts zijn.

108
00:09:59,370 --> 00:10:02,550
En wat dat zal doen is eigenlijk Center een element voor ons.

109
00:10:02,550 --> 00:10:04,570
Dus laat me zien hoe dat werkt.

110
00:10:04,710 --> 00:10:18,390
En de reactie dit weer en kunnen we de marge schrijven en laten we maar zeggen nul marge bovenop auto aan de linkerkant of aan de rechterkant nul marge en de bodem en de auto aan de linkerkant.

111
00:10:18,510 --> 00:10:23,520
En als ik deze op ware grootte en vernieuw je zult zien dat het centra dingen voor ons.

112
00:10:23,520 --> 00:10:37,880
Dus wat dat betekent dat het besloten dat dit is 50 procent, omdat we zeiden dat hier en dan cijfers het uit de linkerkant is auto en de rechter is auto dus gewoon doet het zo veel als het moet doen en dat ook daadwerkelijk te centreren het voor ons.

113
00:10:37,980 --> 00:10:41,540
En dan hebben we nul op de bovenkant en de onderkant, zodat ze samen zijn verpletterd.

114
00:10:41,930 --> 00:10:48,200
Wat we ook doen is er zelfs een kortere manier om dit te doen en het lijkt erop dat deze marge nul Otto.

115
00:10:48,540 --> 00:10:53,470
En zo zal de bovenste en onderste stellen naar links en rechts om het automatisch nul.

116
00:10:53,580 --> 00:11:04,700
Zo verandert er niets en we kunnen ook deze syntax gebruiken als ik wil 50 pixels toe te voegen aan de bovenkant en de auto of ik wil 50 pixels en 20 pixels toe te voegen.

117
00:11:04,740 --> 00:11:09,830
Het enige ding om te onthouden is dat je het nodig hebt x daar tenzij het getal nul is.

118
00:11:10,430 --> 00:11:18,760
Als ik dit voegt 20 bovenaan links en rechts en voegt deze 50 aan de boven- en onderkant.

119
00:11:18,780 --> 00:11:21,070
Dus laten we samen te vatten hier gewoon nog een keer.

120
00:11:21,120 --> 00:11:25,370
We hebben de innerlijke inhoud die is hier kreeg.

121
00:11:25,830 --> 00:11:33,440
We hebben padding die tussen de grenzen dus alles wat we hebben is padding gelaten heb en dan hebben we marge die tussen de grens en aan de andere kant.

122
00:11:33,450 --> 00:11:35,530
Dus tussen de elementen in principe.