Salut.
Aujourd'hui, nous allons parler du modèle de boîte.
Et ce qu'est le modèle de boîte, est vraiment un concept général de CSS
qui vous aide à dimensionner et à placer votre élément là où vous voulez qu'il aille.
Donc, l'une des premières choses dont on va parler, c'est la hauteur et la largeur.
Je sais que je l'ai déjà utilisé un peu dans certaines de mes autres conférences, mais
je voulais être très précis dans la façon dont cela fonctionne.
Et l'une des premières choses que vous devez savoir est que la hauteur et la
largeur de tout élément en ligne est le contenu lui-même.
Donc, si vous avez un lien, la hauteur et la
largeur de ce lien sont juste le texte de la partie cliquable du lien. Les
éléments qui ne sont pas en ligne, les choses qui sont des blocs, des blocs en ligne, des choses comme ça,
ils peuvent prendre des propriétés de hauteur et de largeur, et nous avons vu cela dans la conférence Display.
Donc, chaque fois que vous avez quelque chose qui est en ligne, si vous lui donnez
une hauteur et une largeur, le navigateur l'ignore simplement.
Tout le reste, le navigateur va très bien, je peux aller de l'avant et changer cela pour vous.
Certaines des autres choses auxquelles nous voulons penser alors, quand nous avons des éléments,
c'est comment ils s'intègrent à l'écran.
L' un des moyens les plus faciles
pour vous de placer stratégiquement des choses sur votre page est de placer des bordures autour d'eux.
Même si vous ne voulez pas ces frontières plus tard dans votre produit final,
je trouve qu'il est très utile d'avoir cette idée de l'espace qu'un élément occupe.
Donc, n'importe quel élément peut avoir une bordure autour d'elle, que ce soit son
bloc en ligne, ou son bloc en ligne.
Et ces propriétés de bordure spécifient quelle bordure de style vous voulez,
quelle largeur de bordure et quelle couleur.
Ils sont assez simples.
Le style de bordure est le seul qui doit être spécifié.
Si vous ne spécifiez pas de couleur ou si vous ne spécifiez pas de largeur, aucun problème.
Il sera par défaut noir et probablement un pixel.
Mais vous devez décider quel genre de style vous voulez.
Donc, dans ce cas, j'ai dit, pour tous mes divs, je veux qu'ils aient une
bordure solide d'un pixel autour d'eux, et je ne peux pas vous dire de quelle couleur c'est, parce que
je ne suis pas encore tout à fait geeky, mais je suppose que quelque chose comme le bleu.
Le style de bordure que vous voulez spécifier, alors que la plupart des gens utilisent toujours solide,
il y a beaucoup de styles différents.
Vous pouvez utiliser pointillé, pointillé, rainuré, cravé, caché, encarté, départ.
Il y a beaucoup de choses différentes que vous pouvez faire, et
c'est vraiment une sorte de différence stylistique de votre part.
Je ne fais pas beaucoup d'attention à eux, car j'ai toujours utilisé du solide moi-même.
Une fois que vous avez décidé quel type de style vous voulez, vous pouvez spécifier la largeur et la couleur.
Donc, quand vient le temps de définir la largeur, si vous décidez, est que vous pouvez le définir dans
un certain nombre de pixels ou vous pouvez utiliser les mots clés, mince, moyen ou grand.
Quand vient le temps de faire la couleur,
vous pouvez faire la même chose que nous avons fait depuis le début.
Vous pouvez simplement utiliser le nom, tel que bleu, la valeur RVB, la
valeur hexadécimale, ou tout simplement pour que vous le sachiez, il est également transparent.
Donc, il peut juste prendre la couleur de tout ce qui est en dessous.
Donc, quand vient le temps pour vous de spécifier la taille que vous voulez que votre frontière aille,
vous pouvez spécifier de quatre façons différentes.
Dans le premier exemple, vous lui donnez juste un numéro.
Dans ce cas, trois pixels.
Et ce qu'il va faire,
c'est qu'il va mettre une bordure de trois pixels autour de l'élément entier comme ça.
Si vous décidez de lui donner deux valeurs, est-ce qu'il va définir une bordure de trois pixels sur
le haut et le bas, et une bordure de dix pixels sur la gauche et la droite.
C' est une façon très courante de configurer les choses lorsque vous faites des bordures et
d'autres propriétés, car c'est un raccourci très agréable
qui est encore très simple à comprendre et à lire.
Si tu lui donnes trois valeurs, c'est un peu plus compliqué, et je
trébuche toujours sur ce que c'est, donc je vais faire apparaître la photo juste pour m'en assurer.
La première valeur est toujours la première.
Vous voulez que votre bordure supérieure soit de 3 pixels.
Les 10 pixels sont pour la gauche et la droite, et les 20 pixels pour le bas.
Le dernier est quand vous donnez quatre valeurs, et quand vous donnez quatre valeurs,
cela signifie essentiellement haut, droite, bas, gauche.
Et cela va définir la frontière à quatre valeurs différentes.
Donc, la plupart des gens utilisent soit
la valeur unique, les quatre valeurs, et quelques personnes utilisent également les deux valeurs. La
plupart du temps, et l'une des raisons pour lesquelles je vous montre ça, c'est que ça peut être vraiment intimidant,
et vous vous demandez ce que font les gens quand ils vont continuer.
C' est ce qu'ils font.
Ils utilisent des raccourcis pour qu'ils n'aient pas à avoir la bordure droite, la
bordure gauche, la bordure supérieure, la bordure inférieure.
Marge est fondamentalement cet espace qui est en dehors de votre frontière.
C' est entre, quand je dis toi et ton voisin, ou
ce que je devrais vraiment dire c'est entre l'élément, et le voisin de l'élément.
Donc ça te donne cette place au coude où tu ne veux pas que quelqu'un te touche.
Avec les marges, chaque fois que vous lui donnez une marge positive,
vous dites essentiellement, déplacez votre élément vers la droite ou vers le bas.
Si vous lui donnez une marge négative,
vous la faites se rapprocher du voisin.
Vous le faites bouger vers la gauche ou vers le haut.
Rembourrage est très similaire en concept à la marge,
mais cet espace se trouve entre l'élément et sa bordure.
Ça lui donne un peu d'espace supplémentaire à l'intérieur.
Vous pourriez presque penser qu'il s'agit d'écraser le texte dans certains cas.
De la même manière, chaque fois que vous avez des valeurs positives pour le
remplissage, vous le déplacez vers l'extérieur de l'élément.
Tu lui donnes plus d'espace.
Si vous lui donnez un rembourrage négatif, vous déplacez réellement la bordure près ou
peut-être même au-dessus des éléments qui sont à côté de lui.
Donc, avec la marge et le rembourrage, tout ce que vous allez faire est de donner une valeur numérique.
Tu vas lui donner quelque chose comme 3 pixels ou 10 %.
Tu ne lui donnes aucun type de couleur.
Ça va toujours être transparent.
Le rembourrage sera toujours de la même couleur que l'élément, et la marge
sera toujours la même couleur que le parent, probablement le corps de la page.
Ils, tout comme la bordure, peuvent être définis dans une à quatre valeurs.
Donc, si vous mettez la marge de trois pixels, ce sera une marge de trois pixels autour de tout.
Si vous dites remplissage, dix pixels, cinq pixels, vous aurez le haut, le
bas, la gauche et la droite.
Laisse-moi te montrer une petite idée de ce dont je parle.
Dans ce cas, voici mon texte est mon élément réel.
J' ai dit que c'était ce que je voulais continuer.
Le bleu est la bordure autour de mon élément.
Le jaune est le rembourrage.
C' est cet espace entre mon texte et la bordure, et cette orange est la marge, et
ce que vous dites c'est, ne m'approchez pas de quoi que ce soit d'autre.
Donne-moi autant d'espace autour de moi.
Donc, il peut déplacer vos paragraphes vers le bas.
Ça pourrait déplacer vos divs vers le bas et encore.
Donc, pratique ça.
Et à mesure que vous jouez avec elle de plus en plus,
il sera plus logique de savoir lequel est une marge et lequel est le rembourrage.
Une des choses que vous devez comprendre lorsque vous faites du remplissage et de la bordure et de la
marge, et toutes ces choses est que dans HTML dit, votre hauteur et
votre largeur sont additives.
Et donc ce que cela signifie, c'est que si vous décidez que vous voulez que la largeur de votre élément
soit de 200 pixels, vous devez probablement prendre en compte la
taille de tous ces autres aspects et propriétés.
Donc, dans ce cas, une partie de la largeur est la marge, plus la bordure,
plus le rembourrage, plus l'élément réel avec lui-même.
Et donc tout cela s'additionne vraiment pour obtenir ce que nous considérons la
largeur réelle de votre élément.
Et cela aura de l'importance lorsque vous regardez votre page et que vous la concevez
et que vous essayez de décider combien d'espace vous voulez que chaque élément occupe.
Donc, si nous regardons cet exemple ici où j'ai la largeur est de 100px,
le rembourrage est de 10px, la marge est de 5px et la bordure est de 1px.
J' espère que maintenant, vous faites les calculs dans votre tête, et
je promets de ne pas donner beaucoup plus de mathématiques que cela, mais vous le faites pour comprendre
combien de largeur cet élément, est-ce que cette div, a réellement besoin sur la page.
Et dans ce cas, la largeur est de 132 pixels.
Les 100, plus 10, plus cinq, plus un, plus un, plus cinq, plus dix.
Tout s'additionne.
La hauteur, de la même manière, correspond à votre hauteur, plus le rembourrage supérieur et inférieur, la
marge supérieure et inférieure, ainsi que la bordure supérieure et inférieure.
Très bien, alors quand on parle de marge,
je voulais juste jeter cette diapositive même si elle ne
correspond pas à beaucoup d'autres choses dont on a été nécessaire de parler.
Mais c'est parce que la marge est très importante pour
quand vous voulez centrer des éléments sur une page.
Lorsque nous voulons centrer le texte, nous pourrions simplement utiliser le centre d'alignement du texte,
et tout semblait vraiment bon.
Mais quand vous voulez centrer des éléments, c'est un peu plus difficile.
Et donc la façon par défaut de le faire est d'utiliser la commande margin zero auto.
Donc, si vous vous souvenez, ce premier zéro, qui signifie haut et bas, et
donc ça ne va pas vraiment se soucier de ça.
L' auto est ce qui la met à gauche et à droite.
Maintenant, cela ne fonctionnera que si l'élément est affiché:block,
si l'élément n'est pas flottant, si l'élément a une largeur qui n'est pas automatique,
ce qui signifie que vous le définissez.
Et ce dernier est si l'élément n'est pas fixe ou position absolue.
Maintenant, je n'ai pas encore couvert la position.
Et donc la bonne nouvelle, c'est que, puisque je ne l'ai pas couvert, tu n'as probablement pas
foiré, et tu n'as pas à t'inquiéter de ces deux choses.
Mais lorsque vous essayez d'envoyer vos éléments, revenez à cette diapositive si vous le souhaitez,
et cochez ces cases pour vous assurer que toutes ces propriétés correspondent.
Et c'est la meilleure façon de centrer les choses en ce moment.
Enfin, quand nous parlons de cela, je veux ajouter une option de plus, et
c'est ce qu'on appelle la taille de la boîte.
Et ce que fait la taille de la boîte, c'est qu'elle retire une partie des mathématiques de cette hauteur additive
et de cette largeur additive.
Quelles sont vos options, c'est que vous pouvez avoir content-box, donc box dimensionnement,
et c'est juste votre additif par défaut.
Vous allez devoir vous rappeler combien d'espace vous utilisez.
Le suivant est appelé border-box.
Et border-box prend en
compte la largeur, le contenu, le remplissage et la bordure.
Donc, si vous dites que vous voulez que la largeur soit de 200 pixels,
il ne va pas réellement faire de l'élément 200 pixels.
Ça va faire 200 pixels moins le rembourrage et la bordure.
Une des dernières choses à retenir est que nous allons prendre en compte le rembourrage et la
bordure, cela ne prendra pas en compte la marge.
Donc, enfin,
l'une des choses que je vais vous montrer dans cet exemple en seulement une seconde,
est différentes façons que vous pouvez définir la hauteur et la largeur des différents éléments.
Et il y a deux façons courantes de le faire.
Le premier est appelé absolu, et
c'est quand vous définissez un élément à une taille spécifique.
Vous dites que je veux que ce soit autant de pixels, ou autant de millimètres, ou
autant de centimètres.
Pixels est un moyen très courant de définir des tailles.
L' autre type de mesure est ce que j'appelle fluide, et
il définit la taille par rapport aux éléments environnants ou aux éléments parents.
Ainsi, vous pouvez utiliser des choses telles que le pourcentage.
Vous pouvez utiliser vw, qui signifie
largeur de la fenêtre, vh qui signifie hauteur de la fenêtre.
Vous pouvez même utiliser des choses telles que em et rem, qui ne sont pas couramment utilisés, mais
ils définissent réellement la taille par rapport à ses parents.
Alors allons de l'avant et passons à mon exemple pour que
nous puissions jouer avec cela juste un peu.
Ce ne sera pas suffisant pour démontrer tout ce qu'on peut faire, mais
j'espère que ça vous fera commencer.
Ce que j'ai ici est un fichier HTML très simple
où j'ai un côté gauche et un côté droit.
Mais comme vous pouvez le voir, ils ne sont pas à gauche et à droite en ce moment.
Ils sont juste au-dessus l'un de l'autre.
Donc la première chose que je veux savoir, c'est que tu peux mettre ces divs l'un à côté de l'autre ?
On va devoir utiliser une sorte de combinaison d'affichage, de hauteur, de
largeur et de rembourrage.
Alors allons-y et faisons-le.
Donc, ici dans mon fichier CSS,
vous pouvez tout de suite voir ce genre de choses d'arrière-plan que j'ai fait.
Maintenant, quand vous voulez que les choses soient à côté de l'autre, vous devez leur donner une largeur,
parce qu'en ce moment ils prennent 100%.
Une option serait pour vous d'aller de l'avant et de le définir sur une sorte de pixels.
Et dire peut-être 200 pixels et 200 pixels, et voir ce qui se passerait,
voir si ça marche.
Le problème avec cela, comme je décommente mon code ici, est que lorsque les gens
vont sur différentes tailles de navigateur, vos nombres peuvent être trop grands ou trop petits.
Donc, ce que j'ai fait ici, c'est que je suis allé de l'avant et que j'ai réglé ma largeur à 48%.
Maintenant faire ça est vraiment génial, et je vais sortir de cette ligne
juste une seconde, parce que la plupart des gens ont l'idée que vous voulez
définir la largeur à quelque chose de plus petit.
Ce qu'ils oublient, c'est que même s'ils ne prennent que 48%,
en fait, je vais même faire quelque chose de vraiment petit.
20%, ils ne vont pas l'un à côté de l'autre.
Vous devez donc vous rappeler que vous voulez utiliser ces mesures de fluides.
Alors revenons ici, je vais le ramener à 40%.
Même si vous le rendez vraiment maigre, jusqu'à ce que vous le disiez au navigateur
, oh, je sais que c'est bloqué mais je vais le changer en bloc en ligne,
il ne laissera jamais les éléments de bloc être à côté de l'autre.
C' est pourquoi vous devez vous rappeler de faire ces deux éléments.
Alors allons de l'avant et sauvegardons et rechargeons.
Et donc vous pouvez voir que je suis allé de l'avant et que j'ai fait ma largeur.
J' ai fait mon bloc d'affichage.
J' ai mon rembourrage.
J' ai ma frontière, et j'ai une marge.
Donc la dernière chose que je vais faire, juste pour finir ça pour te montrer ce qui se passe, c'
est que je vais aller de l'avant et
changer ça à 50%, parce que c'est une erreur très courante que les gens font.
Ils disent oh, je veux deux choses l'une à côté de l'autre.
Donc je vais les faire chaque 50%.
N' oubliez pas quand vous faites cela,
cela ne fonctionne pas parce que c'est 50% avant de tenir compte de la frontière.
Alors assurez-vous que vous jouez avec toutes ces choses, que vous jouez avec
la marge, que vous jouez avec le rembourrage, que vous jouez avec la bordure.
C' est comme ça que tu vas faire fonctionner les choses, en peaufinant, en peaufinant, en peaufinant.
Alors allons de l'avant et révisons.
Quand vient le temps pour vous de commencer à mettre en œuvre toutes ces idées,
votre modèle de boîte avec votre rembourrage, contenu, marge
, etc., vous voulez vraiment concevoir des croquis sur papier d'abord, car il est vraiment difficile de mettre les
choses dans une fois que vous avez déjà trouvé un contour, d'accord ?
Donc, concevez d'abord, codez en second.
La deuxième chose que vous pourriez vouloir faire est d'utiliser le modèle
de boîte pour réduire la complexité de votre code.
Ou au moins la complexité de vos calculs en essayant de comprendre
ce que les choses vont là où.
Enfin, peu importe ce que vous faites,
vous devez vous rappeler que la marge doit toujours être considérée.
Cela peut être délicat lorsque vous commencez à essayer de rassembler votre page,
et que les choses vont exactement là où vous voulez qu'elles aillent, et
nous n'avons même pas encore parlé de positionnement, ce qui serait même un autre élément.
Donc pour l'instant, pratiquez ces choses de petites manières.
Utilisez Inspect Element pour jouer avec elle et ne pas avoir à changer autant votre code.
Jusqu' à ce que vous obteniez les choses comme vous voulez qu'elles aient l'air.
Et ne vous inquiétez pas, nous faisons tous des erreurs.
On fait tous ça ensemble.
Mais je pense que votre page est, espérons-le, de plus en
plus proche de quelque chose que vous voudriez vraiment mettre sur le web.
Bon travail.