Bonjour, aujourd'hui, nous allons parler de l'affichage et de la visibilité sur votre page Web.
Maintenant, quand vient le temps de faire votre page, encore et encore, je vais
vous dire que la mise en page où vous voulez que les choses soient est la clé d'une page vraiment efficace.
Et l'une des choses dont vous devez vous souvenir est que chaque élément que nous examinons est
fondamentalement une boîte.
Et le modèle de boîte est quelque chose que nous allons couvrir lors d'une prochaine conférence.
Mais avant d'en arriver aux détails, je veux juste parler de quelques détails.
Parce que le fonctionnement de l'affichage sur votre élément d'affichage affecte tous les
éléments voisins de votre page.
Avant de commencer, je veux juste te rappeler que chaque élément de ta page est une boîte.
Pensez-y comme ça.
Et l'affichage est comment vous pouvez décider si les boîtes doivent être à côté l'une de l'autre,
au-dessous de l'autre, et des choses différentes comme ça.
Donc, quand nous parlons d'affichage,
il y a des valeurs communes que presque tout le monde utilise ou
elles sont juste une valeur par défaut, donc vous l'avez utilisé sans même le savoir. Les
éléments qui sont en ligne seront assis à côté d'autres éléments, ils prennent
juste assez de largeur et de hauteur et pas plus, lorsque vous les mettez sur la page.
Donc, je les considère comme mes bons enfants dans les éléments de la mini-fourgonnette.
C' est bon si je veux mettre trois enfants sur la banquette arrière.
Ils ne vont pas se coude, ils vont très bien.
Ils vont s'entendre.
L' autre type d'affichage est le bloc.
Et ce que le bloc fait, c'est qu'il force un saut de ligne entre vos éléments.
Donc, encore une fois, avec mon exemple,
j'ai un enfant qui ne peut vraiment pas s'asseoir à côté de quelqu'un d'autre.
Je dois les mettre dans leur propre rangée.
Même si elle est vraiment minuscule et qu'elle ne prend pas autant de place,
elle a toute une rangée pour elle-même quand on conduit dans la voiture.
Ce qui est bien à propos des éléments
de bloc est, alors qu'ils prennent toute la largeur horizontale et juste assez de hauteur,
vous pouvez entrer et vous pouvez définir une hauteur et une largeur sur ces éléments.
Donc, même si c'est un bloc, et
que vous avez réservé toute la largeur de la page, vous pouvez dire, mais
je veux vraiment que ce soit seulement 40 pixels, ou la moitié de la page, ou quelque chose comme ça.
Donc, avec Inline, il prend juste assez de place, et vous n'êtes pas en mesure de changer cela.
Tu n'as pas le droit de dire, je veux qu'il soit plus grand ou plus petit.
Si c'est en ligne, c'est tout ce que tu as.
Avec le bloc, vous avez un peu plus de flexibilité, mais
vous avez le problème que vous réservez beaucoup d'espace.
Donc, bien sûr,
ce que nous avons trouvé, c'est cette idée de quelque chose qui prend le meilleur des deux.
Et c'est inline-block. Les
éléments qui ont display inline-block seront les mêmes qu'en ligne et
qu'ils peuvent être à côté de l'autre, mais ils accepteront également la hauteur et la largeur.
Donc si vous avez deux choses qui veulent être à côté de l'autre, mais
vous voulez leur donner beaucoup de place, et maintenant ils sont en ligne.
Eh bien, allez-y, changez-le en inline-block,
puis vous pouvez lui donner une hauteur et une largeur.
Et si vous avez quelque chose qui est bloc et que
vous voulez deux d'entre eux à côté de chacun, encore une fois, pas de problème.
Changez-les en inline-block et vous pouvez définir la largeur et la hauteur.
Le quatrième que nous n'utilisons pas vraiment, c'est l'idée de n'afficher aucun.
Et ce qui se passe ici est si vous avez un élément sur votre page et
que vous lui donnez n'afficher aucun, c'est comme si le navigateur ignorait complètement qu'il existe.
C' est comme s'il l'avait levé et l'avait retiré de la page.
Donc ces quatre, l'inline, le bloc, le bloc inline-block et
le zéro sont ceux avec lesquels nous allons vraiment commencer à jouer au début.
Donc, ce que j'ai ici est juste un fichier simple qui va avoir
trois éléments de span, trois éléments div et trois éléments de paragraphe.
Si vous vous souvenez, les éléments de span sont en ligne, donc
ils ne prendront que la place dont ils ont besoin.
Mais les divs et les paragraphes sont bloqués, donc
ils vont prendre plus de place.
Sur le côté, ce que j'ai fait, c'est que j'ai ajouté un peu de style, ce
qui peut ou non avoir du sens quand on en parle pour la première fois, mais
j'ai donné à chacune de mes travées une hauteur et une largeur.
Fondamentalement, tous mes éléments, une hauteur et une largeur et une couleur de fond différente.
Donc, si on doit le regarder maintenant.
Vous verrez que j'ai rendu toutes mes travées vertes, toutes mes divs bleues, et
tous mes paragraphes une sorte de couleur pourpre rosé.
Et chacun expose exactement par défaut comme comment il se passerait.
La raison pour laquelle les divs sont aussi grands qu'ils le sont et
les paragraphes sont aussi grands qu'ils sont, encore une fois nous avons mis cela dans notre feuille de style.
Vous pouvez voir ma taille et ma largeur.
Si je ne les incluais pas par défaut, ces divs et
paragraphes prendraient toute la largeur de l'écran, et
ils seraient vraiment petits car ils n'auraient besoin que de suffisamment d'espace pour avoir ce texte.
Alors allons de l'avant et jouons avec ça.
Normalement, j'allais dans ma feuille de style et je
mettrais des choses différentes, essayais des affichages différents et des choses différentes comme ça.
Mais j'espère que ce sera un peu plus clair pour
toi si à la place, je fais ça en même temps.
Donc, vous pouvez suivre avec moi avec ce qui est inspecter l'élément, ou vous
pouvez aller de l'avant et changer le code dans votre fichier, l'enregistrer, l'actualiser, l'enregistrer, l'actualiser.
Donc, je dois inspecter l'élément ici en cliquant avec le bouton droit de la souris, et
ce que je vais faire maintenant, c'est que je vais faire un clic droit sur l'un de ces éléments de span.
Inspectez Element et il apparaît pour moi.
N' importe quel élément sur votre page,
vous pouvez jouer avec, vous pouvez soit jouer avec cet élément particulier que vous
pointez là, soit je peux dire que je veux jouer avec toutes les travées.
Alors regardons en bas.
En ce moment, j'ai une hauteur et une largeur pour chacun de mes éléments de span.
Mais en fait, ils ne sont pas très gros.
Alors, comment on change ça ?
Si quelque chose est en ligne, mais si tu veux lui donner une hauteur et une largeur,
on va s'afficher, et je vais y aller.
Et je vais essayer inline-block.
Boom, tout de suite mes travées ont pris ces propriétés.
Alors avant quand ils étaient en ligne, ils étaient petits.
Quand ils sont en bloc en ligne, je peux les façonner vraiment bien.
Et si je les change pour juste bloquer, Vous pouvez voir maintenant qu'ils sont
au-dessus de l'autre parce que les éléments de bloc n'aiment pas être à côté de l'autre.
La dernière propriété que je vais te montrer ici, c'est cette idée de rien.
Quand on n'en a pas, c'est comme si les travées n'existaient même pas.
Vous n'avez pas économisé d'espace pour eux,
ce n'est pas comme si vous saviez même en regardant la page qu'ils étaient déjà là.
Donc quelque chose d'intéressant à faire et vous pourriez l'utiliser plus tard si vous voulez que les choses
apparaissent quelques fois et pas d'autres mais vous ne voulez pas laisser un grand espace blanc.
Alors, allez-y et prenez une seconde et
je vais juste cliquer sur quelques autres choses.
Donc par exemple mes divs, je peux y aller et je peux dire, tu sais quoi, je veux faire juste
ce div, je veux aller de l'avant et le faire en bloc, et voyons ce qui se passe.
Le truc bizarre, c'est que je l'ai changé et que rien ne s'est réellement passé et
je me demande si tu sais pourquoi.
Quand tu as inline-block, tu dis oh, vas-y et
mets-moi à côté d'autres personnes si je me sens.
Mais si vos voisins sont également bloqués, cela ne fonctionnera pas.
Alors maintenant, au lieu d'en changer un, je vais changer tous les divs.
Et vous pouvez le voir, oh, parce qu'ils sont à environ 45%,
deux d'entre eux vont ensuite ensemble, mais pas le dernier.
Donc, il n'y a vraiment pas de bon moyen de se sentir à l'aise avec l'affichage
jusqu'à ce que vous preniez ce code et commenciez à changer les choses.
Que se passe-t-il si c'est en ligne ?
Que se passe-t-il si c'est inline-block ?
Que se passe-t-il si c'est la travée ?
Et faites très attention au fait qu'il ne suffit pas de savoir ce que
l'affichage est pour l'élément sur lequel vous travaillez,
vous devez également connaître l'affichage pour ses voisins.
Mais, allons-y et parlons un peu plus.
Quand nous parlons d'affichage,
il est assez courant de parler aussi de deux autres propriétés aussi.
Et ceux-ci sont appelés float et clair.
Et ce qui flottent et clair est qu'ils ne disent pas nécessairement où vous voulez que
la page soit, l'élément sur votre page soit spécifiquement, mais
où vous voulez généralement la mettre.
Par défaut, lorsque le navigateur met des choses sur la page,
il commence dans le coin supérieur gauche.
Et ça commence juste à les mettre, donc en regardant votre site, ce serait comme la première
chose, la première chose, oh, la suivante est bloc donc je ferais mieux de le mettre en dessous.
Et ça continue à ajouter des choses.
Donc, si votre navigateur est vraiment grand, vous pouvez placer plus d'éléments de portée les uns à côté des autres,
s'il est petit, vous pouvez ajuster moins.
Eh bien, float vous permet de repositionner les choses, et
ça dit hey je veux que vous fassiez ça n'importe où,
et si je dis flotter à droite, je veux que vous le mettiez aussi loin que possible.
Si je dis flotteur gauche, je veux que vous le mettiez aussi loin que vous le pouvez.
Les autres éléments sont fondamentalement conscients les uns des autres, et quand vous utilisez flotteur,
ils ne se chevauchent pas, mais les choses vont sembler un peu folles.
Et quand vous ajoutez à nouveau flotteur, vous affectez vos voisins
parce que vos voisins ont besoin de savoir où vous allez.
C' est pourquoi nous avons cette propriété supplémentaire appelée claire.
Parce que parfois, quand vous codez, vous voulez juste vous assurer que les choses ne
flottent pas à votre gauche ou à votre droite.
Vous voulez vraiment avoir cet espace pour vous-même,
auquel cas vous pouvez utiliser la gauche, la droite ou les deux.
Dégagez à gauche pour vous assurer qu'il n'y a rien de flottant à gauche.
La droite signifie qu'il n'y a rien de flottant à droite.
Et effacer les deux, et comme vous pouvez le deviner,
cela signifie que rien ne devrait flotter à côté de vous du tout.
Alors allons de l'avant et regardons un autre exemple où je vais
jouer avec ce même code mais je vais commencer à utiliser float et clear aussi.
Donc, nous allons regarder le même fichier exact que nous avons juste regardé
quand je jouais avec display block, inline, none, etc
Mais maintenant, nous allons jeter float et clair dans le mix aussi bien.
Voici donc le code que nous regardons, et voici le site web.
La première chose que je vais faire, c'est que je vais jouer avec les travées ici et
que je vais essayer de les flotter.
Alors rappelez-vous, quand vous flottez quelque chose, vous dites de le mettre aussi loin
que vous le pouvez et les autres éléments vont presque agir comme s'
ils n'étaient pas là, mais ils ne vont pas le chevaucher.
Donc je vais descendre ici, aller à mon char.
Dis flotteur.
La première chose que je vais faire, c'est que je vais le flotter à gauche,
ce qui veut dire qu'ils ne bougeront pas trop.
Ce que je veux que tu cherches,
c'est qu'en ce moment, il y a un peu d'espace entre chacune de mes travées.
Quand je le change à gauche, cet espace disparaît et
la div va en fait au-dessous aussi, parce que les travées sont au-dessus.
Maintenant, quand j'essaie de le changer et de le flotter à droite.
Quand je le fais, je veux que vous remarquiez que non seulement ils n'ont pas d'
espace entre eux, qu'ils sont juste à côté l'un de l'autre à nouveau.
Mais si vous regardez, l'ordre des A, B et C est différent.
Parce que les premiers éléments qu'il est placé sur la page est span A et donc
il le déplace aussi loin que possible vers la droite.
Et puis quand il fait l'envergure B, il se déplace aussi loin que possible vers la droite, et
s'étend aussi sur C.
Donc, c'est quelque chose d'intéressant,
et vous pouvez voir que s'ils étaient à gauche, les divs les chevaucheraient.
Bon, alors allons-y et faisons quelques autres choses.
Et je vais faire un changement tous mes divs, de sorte qu'ils le sont aussi.
Allons ici, flottez à gauche.
Donc maintenant, la page est un peu folle parce que
les choses vont partout et vous, vraiment, vous ne voulez probablement pas qu'elle ressemble de cette façon.
Surtout si nous voulions que tous nos paragraphes soient vraiment au bas
de la page.
Donc je vais aller ici à mes paragraphes.
Et je vais y aller et je vais dire que je ne vais pas flotter ça.
Au lieu de cela, je vais dire que j'en ai fini avec flotter,
s'il vous plaît, arrête de flotter autour de moi.
Et je vais vider les deux côtés.
Donc les paragraphes disent maintenant, éloignez-moi de toute cette folie flottante.
Je veux juste être ici.
Flottant, dégageant, des choses différentes comme ça.
Lorsque nous faisons ce genre d'exemples de code très simples dans la conférence,
ils n'auront pas toujours autant de sens que lorsque vous les mettez dans le
cadre de quelque chose de plus grand.
Mais le problème est que je ne peux pas vous montrer des exemples de quelque chose de plus grand parce que vous vous
endormiez tous environ trois ou quatre minutes dans le code.
Alors allez-y, faites ce que nous avons toujours fait et
jouez un peu avec ça jusqu'à ce que vous ayez l'idée de ce qu'ils font.
Avec le temps,
vous commencerez à comprendre quand vous voulez qu'ils fassent ce genre d'actions.