1
00:00:00,840 --> 00:00:06,440
Ainsi, un des concepts les plus importants que nous devons encore couvrir et évaluer est le positionnement des éléments.

2
00:00:06,600 --> 00:00:10,290
Alors, comment pouvons-nous mettre en page une page ou déplacer un div vers le haut à droite.

3
00:00:10,410 --> 00:00:15,720
Ou comment faire une balise d'ancrage plus large ou ajouter l'espacement entre les images.

4
00:00:15,780 --> 00:00:20,110
Tout cela est vraiment important et tout est lié à quelque chose appelé le modèle de boîte.

5
00:00:20,220 --> 00:00:31,190
Donc, le modèle de boîte est cette idée de base qui est vraiment centrale pour tout en HD que vous évaluez qui est que, fondamentalement, chaque élément a une boîte rectangulaire autour d'elle.

6
00:00:31,680 --> 00:00:39,620
Donc, nous pouvons voir ici juste aller à aller à n'importe quelle page Web sur MDA et j'ai l'inspecteur ouvert et j'ai la loupe sélectionnée.

7
00:00:40,010 --> 00:00:44,810
Et comme je planer sur chaque élément, vous pouvez voir qu'il ya une boîte autour de lui.

8
00:00:44,910 --> 00:00:48,180
Donc, ce H2 a une boîte bleue autour de lui.

9
00:00:48,180 --> 00:00:49,810
Celui-ci a une boîte.

10
00:00:50,130 --> 00:00:53,370
Même les choses qui ne sont pas particulièrement boxy.

11
00:00:53,490 --> 00:00:56,320
Donc, ce coin arrondi div ..

12
00:00:56,490 --> 00:00:58,080
Il a encore une boîte autour de lui.

13
00:00:58,080 --> 00:00:59,310
Dans les coulisses.

14
00:00:59,520 --> 00:01:09,130
Donc, cela ici et celui-ci n'est vraiment pas rond ou pas boxy cherche à avoir ces coins arrondis, mais il est encore une boîte.

15
00:01:09,240 --> 00:01:15,870
Donc, ces boîtes sont vraiment utiles dans les coulisses parce que nous pouvons les styles de différentes propriétés sur eux.

16
00:01:15,870 --> 00:01:19,350
Donc, il ya quatre propriétés ou quatre parties différentes de chaque boîte.

17
00:01:19,350 --> 00:01:23,550
Il ya beaucoup plus de propriétés, mais pour les parties de la boîte que nous pouvons manipuler.

18
00:01:23,610 --> 00:01:29,790
Supposons donc que ce diagramme qui est aussi de MDA et est d'un paragraphe.

19
00:01:29,790 --> 00:01:42,210
Donc, j'ai un texte dans un paragraphe et je lui donne une bordure orange ou jaune et c'est ce que l'utilisateur voit un texte et une frontière, mais derrière les scènes il ya en fait d'autres choses se passe.

20
00:01:42,360 --> 00:01:47,920
Donc, entre la frontière et le texte, il ya quelque chose appelé remplissage.

21
00:01:48,000 --> 00:01:51,040
Donc, le rembourrage est juste l'espace à l'intérieur de la frontière.

22
00:01:51,190 --> 00:02:01,060
Donc, entre le contenu et la frontière est le rembourrage et il ya aussi la marge qui est de l'autre côté, c'est entre la frontière à l'extérieur et tout le reste.

23
00:02:01,170 --> 00:02:04,720
Nous utilisons donc souvent la marge pour ajouter l'espacement entre les éléments.

24
00:02:04,860 --> 00:02:11,340
Donc, si nous avions deux paragraphes et je voulais qu'ils soient plus éloignés, j'utiliserais la marge et l'augmenterait.

25
00:02:11,880 --> 00:02:18,700
Donc, maintenant, nous allons faire un peu de plongée profonde dans la syntaxe de certaines des propriétés que nous voulons utiliser avant de le faire.

26
00:02:18,720 --> 00:02:29,870
Je veux juste vous montrer deux choses que vous pouvez hâte de faire la première des plus excitantes, mais ce qui est important, c'est que nous avons maintenant un moyen de faire quelque chose qui ressemble à cela.

27
00:02:29,880 --> 00:02:39,330
Jusqu'à présent, nous n'avons pas réellement un moyen de rendre ces boîtes qui sont connectés à un autre qui ont un avec assigné à eux, mais ils sont vides, il n'y a pas de texte à l'intérieur.

28
00:02:39,330 --> 00:02:50,830
Nous allons donc en apprendre davantage sur le modèle de boîte et appliquer ici pour faire ce conseil tic tac toe et puis nous allons faire ce site de portefeuille pour un photographe fictif.

29
00:02:51,450 --> 00:02:52,350
Alors, c'est sympa.

30
00:02:52,420 --> 00:03:00,690
C'est des images qu'il réagit ainsi il change la taille un changement la taille de fenêtre et la grille.

31
00:03:00,750 --> 00:03:04,270
Tout cela est basé sur les concepts que vous allez apprendre ici.

32
00:03:04,710 --> 00:03:07,020
Alors je vais aller de l'avant et ouvrir sublime ici.

33
00:03:07,560 --> 00:03:10,510
Et j'ai un document très simple que j'ai créé.

34
00:03:10,740 --> 00:03:12,600
Il ne s'agit donc que d'un simple HTML.

35
00:03:12,660 --> 00:03:14,670
Il a une feuille de style connecté.

36
00:03:14,700 --> 00:03:15,330
C'est vide.

37
00:03:15,330 --> 00:03:18,930
Mis à part quelques commentaires et ensuite deux paragraphes.

38
00:03:18,930 --> 00:03:27,660
Donc, si je l'ouvre, vous pouvez voir que c'est très basique très ennuyeux et nous allons juste l'utiliser pour jouer avec le modèle de boîte.

39
00:03:28,860 --> 00:03:43,370
Donc je vais aller à mon succès et je vais sélectionner des paragraphes et puis je vais juste copier ces commentaires à l'intérieur de sorte que je puisse écrire du code sous eux juste pour vous dire visuellement ce que je fais.

40
00:03:43,380 --> 00:03:45,740
Commençons donc par leur donner une frontière.

41
00:03:45,900 --> 00:03:57,630
Donc, ce devrait être la frontière de la révision et nous allons faire pour pixel bleu solide sauf que rafraîchir et vous pouvez voir que nous obtenons une bordure tout le chemin autour du contenu.

42
00:03:57,630 --> 00:04:02,360
Et ce que vous remarquez également est que le contenu ici va tout le chemin à travers l'écran.

43
00:04:02,370 --> 00:04:09,620
Notre frontière ne s'arrête pas ici et c'est parce que quand nous faisons un paragraphe par défaut, il va tout le long de l'écran.

44
00:04:09,630 --> 00:04:23,260
Donc, si je veux changer la largeur du paragraphe lui-même du texte, je peux utiliser la propriété width et je vais aller de l'avant et donner une largeur d'un.

45
00:04:23,490 --> 00:04:25,390
Commençons par 200 pixels.

46
00:04:25,890 --> 00:04:29,190
Et si je rafraîchis vous pouvez voir que nous avons maintenant changé la largeur.

47
00:04:29,190 --> 00:04:34,920
Si je regarde le contenu n'est pas bleu.

48
00:04:35,940 --> 00:04:37,840
Et puis nous avons une bordure autour d'elle.

49
00:04:38,310 --> 00:04:39,700
Le contenu est donc bleu.

50
00:04:40,110 --> 00:04:45,350
Et sur ce diagramme qui est cette case ici, cette case d'élément.

51
00:04:45,630 --> 00:04:48,330
Et puis nous avons une frontière qui est directement autour de lui.

52
00:04:48,330 --> 00:04:52,020
Il n'y a pas d'espace entre la frontière et le contenu.

53
00:04:52,020 --> 00:04:56,920
Une autre chose avec la largeur et aussi il ya une hauteur.

54
00:04:57,060 --> 00:05:02,360
Alors faisons une hauteur de 300 pixels et voyons que nous venons d'ajouter un tas d'espace.

55
00:05:02,370 --> 00:05:06,620
Je vais me débarrasser de cela, mais il ya une hauteur que nous pouvons utiliser comme avec.

56
00:05:06,930 --> 00:05:11,760
Nous ne devons pas simplement utiliser des pixels pour pouvoir utiliser des pourcentages.

57
00:05:13,890 --> 00:05:15,780
Et ceux qui sont vraiment utiles, laissez-moi vous montrer.

58
00:05:15,810 --> 00:05:23,310
Faisons 50 pour cent et vous pourriez vous demander ce que c'est que 50 pour cent de.

59
00:05:23,310 --> 00:05:27,290
Et la réponse est que c'est 50 pour cent de l'élément parent.

60
00:05:27,300 --> 00:05:35,240
Donc, dans ce cas, c'est le corps que le paragraphe est à l'intérieur du paragraphe va à mi-chemin à travers le corps.

61
00:05:35,310 --> 00:05:37,390
Dans notre cas, le corps est la page entière.

62
00:05:37,410 --> 00:05:38,240
C'était tout le chemin à travers.

63
00:05:38,250 --> 00:05:40,620
Nous finissons donc avec la moitié de la page.

64
00:05:40,800 --> 00:05:54,890
Et ce qui est gentil à ce sujet si je change la taille de la fenêtre, il change aussi beaucoup de gens utilisent ce et l'utilisera effectivement à utiliser dans cette grille d'image.

65
00:05:55,280 --> 00:05:59,490
Vous pouvez voir que les images changent leur largeur et c'est un pourcentage.

66
00:06:00,040 --> 00:06:04,590
OK alors je vais le garder comme ça pour le moment.

67
00:06:04,770 --> 00:06:11,600
Et puis la prochaine propriété dont nous allons parler est le rembourrage et rappelez-vous rembourrage est cet espace entre l'élément et la bordure.

68
00:06:11,750 --> 00:06:15,410
Et en ce moment, nous n'avons pas d'espace les frontières sur le dessus.

69
00:06:15,840 --> 00:06:22,120
Donc, il ya une propriété appelée rembourrage et nous pouvons lui donner un certain nombre de pixels et faisons 10 pixels pour commencer.

70
00:06:22,230 --> 00:06:25,130
Enregistrez l'actualisation du fichier.

71
00:06:25,410 --> 00:06:28,700
Et maintenant, nous avons 10 pixels de rembourrage sur tous les côtés.

72
00:06:29,040 --> 00:06:49,760
Donc, si je regarde maintenant, vous verrez qu'il ya maintenant ce contenu vert qui est introduit, donc nous avons le contenu bleu lui-même et puis nous avons le vert autour d'elle qui est entre la frontière et le contenu afin que nous puissions évidemment incrémenter ceci et nous obtenons beaucoup Plus d'espace à l'intérieur.

73
00:06:50,490 --> 00:06:52,890
Mais ce n'est pas la seule façon de régler padding.

74
00:06:52,920 --> 00:06:57,250
Ceci le place sur tous les quatre côtés exactement identiques.

75
00:06:57,380 --> 00:07:01,760
Mais parfois, nous voulons seulement rembourrage sur un côté ou deux côtés, tout comme avec la frontière.

76
00:07:01,800 --> 00:07:09,830
Il ya des raccourcis pour la version plus longue où il est une frontière top 10 pixels bord inférieur cinq pixels.

77
00:07:09,900 --> 00:07:20,270
La même chose avec le rembourrage et il commentaire que dehors et nous pouvons faire quelque chose comme le bourrage gauche 40 pixels et frais.

78
00:07:20,520 --> 00:07:22,090
Et nous obtenons le remplissage juste ici.

79
00:07:22,320 --> 00:07:24,250
Et c'est le seul endroit pour rembourrage est.

80
00:07:24,330 --> 00:07:30,830
Et je me souviens de l'espace ici ce bleu n'est pas le rembourrage qui est son contenu réel qui est de cela avec ici.

81
00:07:30,990 --> 00:07:33,610
Si différent même si il semble qu'il ya de l'espace sur la droite.

82
00:07:33,620 --> 00:07:35,930
Il vient d'un endroit différent.

83
00:07:37,170 --> 00:07:40,920
Donc, une autre chose que nous pouvons faire ici est jouer avec la marge.

84
00:07:41,160 --> 00:07:43,780
Donc, la marge est une dernière pièce du puzzle.

85
00:07:43,860 --> 00:07:45,900
C'est l'espace à l'extérieur de la frontière.

86
00:07:45,900 --> 00:07:47,980
Donc entre les éléments.

87
00:07:48,450 --> 00:08:01,280
Donc cela va être utile parce que nous pourrions vouloir incrémenter ou augmenter cet espace ici ou comme un exemple ici cet espace ici entre les images est mis en utilisant Marjan.

88
00:08:01,500 --> 00:08:10,240
Donc, il ressemble en fait comme le rembourrage afin que nous puissions dire marge et nous allons faire quelque chose d'évident comme 100 pixels pour démarrer et rafraîchir.

89
00:08:10,410 --> 00:08:17,100
Et ce qui s'est passé, c'est que nous avons maintenant 100 pixels d'espace sur tous les côtés de l'élément à l'extérieur de la frontière.

90
00:08:18,240 --> 00:08:19,360
Donc trouver l'aspect.

91
00:08:19,980 --> 00:08:28,710
Vous verrez que dans Chrome qui est identifié comme orange si bleu est le contenu vert est le rembourrage dans Orange est la marge.

92
00:08:28,800 --> 00:08:30,030
Donc, tout comme le rembourrage.

93
00:08:30,030 --> 00:08:38,890
Parfois, nous voulons seulement définir une partie de la marge d'un côté afin que nous puissions faire quelque chose comme marge supérieure est de 500 pixels.

94
00:08:38,900 --> 00:08:46,070
Et puis quand ils viennent à celui-ci pour l'instant et de sauver et nous avons seulement de l'espace sur le haut à gauche, il n'y a rien.

95
00:08:46,160 --> 00:08:48,180
Et puis plus d'espace sur le dessus de celui-ci.

96
00:08:48,170 --> 00:08:50,480
Rien sur le bas, sur la gauche ou sur la droite.

97
00:08:50,610 --> 00:08:52,710
C'est donc une marge.

98
00:08:52,710 --> 00:08:59,510
Donc, parfois, nous ajoutons des valeurs à tous les côtés de la marge, mais nous ne voulons pas avoir à le faire avec quatre lignes différentes.

99
00:08:59,660 --> 00:09:06,500
Donc, nous ne voulons pas qu'ils soient exactement les mêmes s'ils sont ici, mais nous n'avons pas tous à dire marge marge supérieure marge gauche marge droite inférieure.

100
00:09:06,570 --> 00:09:09,550
Il y a donc un autre raccourci comme pour la frontière.

101
00:09:09,570 --> 00:09:14,780
Ou nous pouvons faire les choses à la fois, nous pouvons faire cette marge et lui donner quatre valeurs.

102
00:09:14,820 --> 00:09:21,300
Donc, la première est pour le haut, puis la droite, puis le bas.

103
00:09:21,750 --> 00:09:36,820
Let's faire 500 pixels, puis la gauche et en faisant que nous obtenons cette belle marge recto verso où les valeurs sont toutes différentes, mais nous avons seulement eu à faire dans une ligne.

104
00:09:37,290 --> 00:09:49,920
Donc, juste pour inspecter ce ici et voir si nous obtenons les 500 pixels sur le bas, le 20 sur le dessus, nous obtenons la centaine sur la gauche et puis nous avons nos 40 sur la droite.

105
00:09:50,010 --> 00:09:53,790
Donc, il ya une dernière chose que vous verrez souvent avec une marge qui est la marge.

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

107
00:09:54,780 --> 00:09:59,340
Donc, ce que nous pouvons faire est de définir la marge d'être automatique sur la gauche ou la droite.

108
00:09:59,370 --> 00:10:02,550
Et ce que nous allons faire, c'est en fait Centrer un élément pour nous.

109
00:10:02,550 --> 00:10:04,570
Alors laissez-moi vous montrer comment cela fonctionne.

110
00:10:04,710 --> 00:10:18,390
Et le commentaire de nouveau et nous pouvons écrire la marge et disons simplement marge zéro sur le dessus auto sur la gauche ou sur la marge zéro droite et en bas et auto sur la gauche.

111
00:10:18,510 --> 00:10:23,520
Et si je fais cette pleine taille et de rafraîchir vous verrez qu'il centre des choses pour nous.

112
00:10:23,520 --> 00:10:37,880
Donc, ce que cela signifie, c'est décidé que cela est de 50 pour cent parce que nous avons dit qu'ici et puis il s'avère que la gauche est automatique et la droite est auto donc il fait autant que ce qu'il doit faire et qui sera effectivement le centre pour nous.

113
00:10:37,980 --> 00:10:41,540
Et puis nous avons zéro sur le haut et le bas de sorte qu'ils sont scrunched ensemble.

114
00:10:41,930 --> 00:10:48,200
Ce que nous pouvons également faire il ya une façon encore plus courte de faire cela et il ressemble à cette marge zéro Otto.

115
00:10:48,540 --> 00:10:53,470
Et ainsi ceci placera le dessus et le fond à zéro le gauche et le droit à l'auto.

116
00:10:53,580 --> 00:11:04,700
Donc, rien ne change et nous pouvons aussi utiliser cette syntaxe si je veux ajouter 50 pixels au sommet et à l'auto ou je veux ajouter 50 pixels et 20 pixels.

117
00:11:04,740 --> 00:11:09,830
La seule chose à retenir est que vous avez besoin du x là à moins que le nombre est zéro.

118
00:11:10,430 --> 00:11:18,760
Donc, si je fais cela, il ajoute 20 sur le haut à gauche et à droite, puis il ajoute 50 en haut et en bas.

119
00:11:18,780 --> 00:11:21,070
Reprenons donc ici juste une fois de plus.

120
00:11:21,120 --> 00:11:25,370
Nous avons le contenu intérieur qui est juste ici.

121
00:11:25,830 --> 00:11:33,440
Nous avons un rembourrage qui se trouve entre les deux frontières, donc tout ce que nous avons est un rembourrage à gauche et ensuite nous avons une marge qui est entre la frontière et de l'autre côté.

122
00:11:33,450 --> 00:11:35,530
Donc entre les éléments fondamentalement.