Ainsi, un des concepts les plus importants que nous devons encore couvrir et évaluer est le positionnement des éléments.
Alors, comment pouvons-nous mettre en page une page ou déplacer un div vers le haut à droite.
Ou comment faire une balise d'ancrage plus large ou ajouter l'espacement entre les images.
Tout cela est vraiment important et tout est lié à quelque chose appelé le modèle de boîte.
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.
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.
Et comme je planer sur chaque élément, vous pouvez voir qu'il ya une boîte autour de lui.
Donc, ce H2 a une boîte bleue autour de lui.
Celui-ci a une boîte.
Même les choses qui ne sont pas particulièrement boxy.
Donc, ce coin arrondi div ..
Il a encore une boîte autour de lui.
Dans les coulisses.
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.
Donc, ces boîtes sont vraiment utiles dans les coulisses parce que nous pouvons les styles de différentes propriétés sur eux.
Donc, il ya quatre propriétés ou quatre parties différentes de chaque boîte.
Il ya beaucoup plus de propriétés, mais pour les parties de la boîte que nous pouvons manipuler.
Supposons donc que ce diagramme qui est aussi de MDA et est d'un paragraphe.
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.
Donc, entre la frontière et le texte, il ya quelque chose appelé remplissage.
Donc, le rembourrage est juste l'espace à l'intérieur de la frontière.
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.
Nous utilisons donc souvent la marge pour ajouter l'espacement entre les éléments.
Donc, si nous avions deux paragraphes et je voulais qu'ils soient plus éloignés, j'utiliserais la marge et l'augmenterait.
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.
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.
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.
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.
Alors, c'est sympa.
C'est des images qu'il réagit ainsi il change la taille un changement la taille de fenêtre et la grille.
Tout cela est basé sur les concepts que vous allez apprendre ici.
Alors je vais aller de l'avant et ouvrir sublime ici.
Et j'ai un document très simple que j'ai créé.
Il ne s'agit donc que d'un simple HTML.
Il a une feuille de style connecté.
C'est vide.
Mis à part quelques commentaires et ensuite deux paragraphes.
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.
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.
Commençons donc par leur donner une frontière.
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.
Et ce que vous remarquez également est que le contenu ici va tout le chemin à travers l'écran.
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.
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.
Commençons par 200 pixels.
Et si je rafraîchis vous pouvez voir que nous avons maintenant changé la largeur.
Si je regarde le contenu n'est pas bleu.
Et puis nous avons une bordure autour d'elle.
Le contenu est donc bleu.
Et sur ce diagramme qui est cette case ici, cette case d'élément.
Et puis nous avons une frontière qui est directement autour de lui.
Il n'y a pas d'espace entre la frontière et le contenu.
Une autre chose avec la largeur et aussi il ya une hauteur.
Alors faisons une hauteur de 300 pixels et voyons que nous venons d'ajouter un tas d'espace.
Je vais me débarrasser de cela, mais il ya une hauteur que nous pouvons utiliser comme avec.
Nous ne devons pas simplement utiliser des pixels pour pouvoir utiliser des pourcentages.
Et ceux qui sont vraiment utiles, laissez-moi vous montrer.
Faisons 50 pour cent et vous pourriez vous demander ce que c'est que 50 pour cent de.
Et la réponse est que c'est 50 pour cent de l'élément parent.
Donc, dans ce cas, c'est le corps que le paragraphe est à l'intérieur du paragraphe va à mi-chemin à travers le corps.
Dans notre cas, le corps est la page entière.
C'était tout le chemin à travers.
Nous finissons donc avec la moitié de la page.
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.
Vous pouvez voir que les images changent leur largeur et c'est un pourcentage.
OK alors je vais le garder comme ça pour le moment.
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.
Et en ce moment, nous n'avons pas d'espace les frontières sur le dessus.
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.
Enregistrez l'actualisation du fichier.
Et maintenant, nous avons 10 pixels de rembourrage sur tous les côtés.
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.
Mais ce n'est pas la seule façon de régler padding.
Ceci le place sur tous les quatre côtés exactement identiques.
Mais parfois, nous voulons seulement rembourrage sur un côté ou deux côtés, tout comme avec la frontière.
Il ya des raccourcis pour la version plus longue où il est une frontière top 10 pixels bord inférieur cinq pixels.
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.
Et nous obtenons le remplissage juste ici.
Et c'est le seul endroit pour rembourrage est.
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.
Si différent même si il semble qu'il ya de l'espace sur la droite.
Il vient d'un endroit différent.
Donc, une autre chose que nous pouvons faire ici est jouer avec la marge.
Donc, la marge est une dernière pièce du puzzle.
C'est l'espace à l'extérieur de la frontière.
Donc entre les éléments.
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.
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.
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.
Donc trouver l'aspect.
Vous verrez que dans Chrome qui est identifié comme orange si bleu est le contenu vert est le rembourrage dans Orange est la marge.
Donc, tout comme le rembourrage.
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.
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.
Et puis plus d'espace sur le dessus de celui-ci.
Rien sur le bas, sur la gauche ou sur la droite.
C'est donc une marge.
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.
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.
Il y a donc un autre raccourci comme pour la frontière.
Ou nous pouvons faire les choses à la fois, nous pouvons faire cette marge et lui donner quatre valeurs.
Donc, la première est pour le haut, puis la droite, puis le bas.
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.
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.
Donc, il ya une dernière chose que vous verrez souvent avec une marge qui est la marge.
Auto.
Donc, ce que nous pouvons faire est de définir la marge d'être automatique sur la gauche ou la droite.
Et ce que nous allons faire, c'est en fait Centrer un élément pour nous.
Alors laissez-moi vous montrer comment cela fonctionne.
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.
Et si je fais cette pleine taille et de rafraîchir vous verrez qu'il centre des choses pour nous.
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.
Et puis nous avons zéro sur le haut et le bas de sorte qu'ils sont scrunched ensemble.
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.
Et ainsi ceci placera le dessus et le fond à zéro le gauche et le droit à l'auto.
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.
La seule chose à retenir est que vous avez besoin du x là à moins que le nombre est zéro.
Donc, si je fais cela, il ajoute 20 sur le haut à gauche et à droite, puis il ajoute 50 en haut et en bas.
Reprenons donc ici juste une fois de plus.
Nous avons le contenu intérieur qui est juste ici.
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é.
Donc entre les éléments fondamentalement.