Donc, l'une des choses que vous avez peut-être remarqué pendant que vous avez traversé un autre
code est que parfois lorsque vous jouez avec la hauteur et la largeur d'un élément.
Vous découvrez qu'il n'est plus assez grand pour contenir tout le texte que vous
vouliez montrer.
Alors, que pouvez-vous faire lorsque le contenu ne rentre plus
dans la boîte que vous avez faite avec votre hauteur et votre largeur ?
Eh bien, vous pouvez utiliser un débordement de propriété pour déterminer comment les gens vont pouvoir
accéder à ce contenu, ou s'ils vont même pouvoir y accéder du tout.
Les quatre valeurs de débordement,
incluent visible, ce qui signifie fondamentalement si vous avez dessiné une boîte.
Et il y a tout un tas de texte à l'intérieur,
le texte va sortir de la boîte.
Donc, quoi qu'il en soit, le contenu est visible même s'il sort des lignes.
Caché fait à peu près le contraire.
Il est dit, [SON] si vous avez quelque chose dans cette boîte et qu'il est trop grand,
il a disparu.
Tu ne peux pas le voir.
Maintenant, ce n'est pas une bonne idée, car cela va causer des problèmes
si l'utilisateur augmente la taille de la police sur son navigateur.
Donc, si vous avez fait une sorte de boîte de 600 x 800 pixels,
et que vous pensez, oh ce sera génial, pas de problème.
N' importe qui pourra lire ceci.
Que va-t-il se passer si quelqu'un entre et augmente la taille de la police ?
Votre boîte ne s'agrandit pas, mais le texte le fait, il est donc
possible qu'ils ne puissent pas voir le contenu.
Donc, une troisième option est de donner un défilement de débordement.
Et ce que cela fera, c'est qu'il donnera réellement une
barre de défilement horizontale et verticale à l'élément.
Même si ce n'est qu'un paragraphe, tout d'un coup votre paragraphe a une barre de défilement pour que
les gens puissent voir tout ce qu'il contient.
La valeur finale est auto, et ce qu'il fait est dit, oh,
je vais seulement ajouter des barres de défilement si nécessaire.
Selon la façon dont la personne consulte le site en ce moment.
Je vais aller de l'avant et
énumérer quelques ressources pour vous montrer quelques exemples de l'apparence du débordement.
Mais pour l'instant, on va aller de l'avant et continuer à avancer.
Parce que ce que je voulais partager avec vous, c'est cette idée d'autres valeurs d'affichage.
Encore une fois les navigateurs sont toujours en train de changer.
HTML5 et les versions futures sont toujours en train de changer et
ils essaient d'ajouter un nouveau support.
Le problème est que lorsque vous voyez ces nouveaux
outils cool, ils ne fonctionnent pas toujours sur tous les navigateurs.
Donc, en ligne, bloc en ligne, bloc et aucun fonctionnera partout.
Mais en voici quelques autres qui commencent lentement à gagner en acceptation.
Et ce sont table, grille et flexbox.
Pour la grille et la flexbox, je vais vous laisser le soin de jouer avec.
Mais je voulais vous montrer un exemple de l'endroit où beaucoup de mes élèves trouvent l'
affichage de la table vraiment utile. Le
fonctionnement d'un affichage de tableau est que vous ne créez pas de tableau réel avec votre
code HTML, et que vous n'avez pas non plus la table de balises.
Mais vous dites à votre navigateur que vous voulez le structurer comme s'il s'agissait d'une table.
Donc, vous feriez n'importe quel type d'élément contenant affichage : table.
Et puis tout ce que vous voulez aligner dans de belles colonnes,
vous utiliseriez display:table-cell.
Donc, cela semble très déroutant donc
je voulais m'assurer de vous donner un exemple à suivre avec moi.
J' ai donc ici un code qui est fondamentalement juste
un div, quelques divs avec quelques paragraphes.
Et ce que je voulais faire, c'était que je voulais m'assurer qu'ils n'avaient pas
le même contenu.
Comme vous pouvez le voir, chacun des divs est maintenant à côté de l'autre parce que nous lui
avons dit que nous ne voulons pas qu'ils soient sous l'autre.
Mais ce n'est vraiment pas ce que vous espériez qu'il ressemble.
Alors allons de l'avant et essayons d'ajouter ce flotteur gauche.
Save, je vais aller de l'avant et me rafraîchir.
Et vous pouvez voir, ça a l'air un peu mieux.
Donc, c'est génial parce que nous voulions que tout soit à côté de l'autre.
Mais ce que je vais faire maintenant, c'est que je vais te montrer quelque chose qui ne marche pas
très bien.
Et c'est cette idée de quand je le redimensionne.
Maintenant, vous pouvez voir cette idée que le débordement pourrait être vraiment important parce que
maintenant les choses vont à l'extérieur des divs eux-mêmes.
En plus, je n'ai vraiment aucune marge entre eux.
Alors allons de l'avant et ajouter débordement, Caché,
ou défilement, juste pour vous montrer de quoi je parlais là pendant une seconde.
Je vais aller de l'avant et le rafraîchir.
Et maintenant, vous pouvez voir que tout est contenu dans la boîte de contenu, et
je peux réellement entrer ici et je peux faire défiler chacun d'entre eux.
En fait, je ne suis pas un grand fan de ça,
parce que je n'aime pas que les gens aient besoin de savoir qu'ils peuvent faire défiler.
Donc, nous allons essayer quelque chose de nouveau ici, à la place ce que je vais faire est de définir
la largeur à 30%, et je vais aller de l'avant et utiliser le bloc inline-block.
Et regardons à quoi ça ressemble maintenant.
Je dois me rappeler, j'utilise une nouvelle feuille de style, donc je dois entrer et
changer mon HTML pour utiliser cette feuille de style.
Le nombre de fois où je venais avec ces exemples pour vous où j'ai oublié de
changer la feuille de style, ou j'ai oublié et l'ai nommé mal était vraiment embarrassant.
J' espère que vous éviterez les mêmes problèmes que moi.
Ici, je vais le rafraîchir.
Vous pouvez voir que ce n'est pas le regard que nous espérons.
Il redimensionne, mais il ne fait tout simplement pas ce que nous voulons parce que chacun a sa
propre hauteur particulière parce que nous voulons vraiment qu'il s'adapte juste à cela.
C' est là que la cellule de table entre en jeu.
Je vais changer mon affichage de bloc en cellule de tableau.
Et pour une fois, quand je vais me rafraîchir,
je vais savoir pourquoi ça ne marche pas.
Mais je veux te montrer, quand j'appuie sur rafraichir, ça a l'air bien
ici parce que ça a fait pour que tout fonctionne.
Maintenant, selon le navigateur que vous utilisez, cela peut ne pas fonctionner.
Parce que ce que vous voulez vraiment dire, c'est que si je vais aller de l'avant et
faire cette cellule de table usagée, n'oubliez pas d'aller dans votre corps et de dire l'affichage.
Très bien et je vais me rafraîchir et ça va être le même,
ça va être un meilleur style de codage.
Maintenant, je vais essayer de mettre beaucoup d'exemples de codage ici,
dans ce cours CSS, afin que vous puissiez jouer avec.
Mais, je ne peux pas insister assez, parfois cela ne va pas fonctionner exactement de la même façon
pour vous, parce que vous pourriez utiliser un navigateur différent.
Vous utilisez peut-être le même navigateur, mais une version différente. La
chose la plus importante est d'y aller,
et de continuer à essayer ces nouvelles valeurs, de voir ce qui se passe et de jouer avec elle.
Quand vient le temps de votre projet final, c'est quand être vraiment précis pour
s'assurer que tout semble bien sur chaque navigateur.
La dernière chose que je veux mentionner très rapidement était cette idée de visibilité.
Et il spécifie si un élément va être vu par un utilisateur.
Maintenant, nous avons parlé de cela plus tôt quand j'ai parlé de n'afficher aucun, mais
ce qui se passe sur la visibilité est que vous pouvez réellement voir que l'espace a été laissé pour elle.
Il n'y a rien là-bas.
Ainsi, lorsque vous utilisez la visibilité, les options sont visibles, masquées ou
réduites si vous utilisez des tables.
Si vous voyez cela et que vous vous demandez quelle est la différence entre l'affichage et
la visibilité.
Rappelez-vous simplement qu'en affichant aucun,
le navigateur agit comme s'il n'était même pas là.
Tu ne vois rien.
Avec la visibilité cachée, le navigateur va quitter l'espace
que cet élément prendrait, il ne le montre tout simplement pas.
Donc, enfin, allons de l'avant et révisons.
L' affichage n'est qu'un des nombreux outils que nous allons utiliser pour
positionner les éléments sur votre page.
La conception précoce, décider à quoi vous voulez que votre page ressemble avant de commencer à coder,
va rendre les choses plus faciles.
Ne codez pas en pensant que je veux utiliser le design flottant droit, et puis décidez oh,
je vais devoir utiliser float juste ici.
Utilisez tous les différents outils que nous avons,
tels que inspecter élément, pour voir vos différentes options.
Et ça va rendre votre vie de codage beaucoup plus facile.
Nous voulons éviter d'enregistrer l'actualisation, enregistrer l'actualisation.
Au lieu de cela, utilisez ces outils et
vous constaterez que vous prenez de très bonnes décisions dans votre conception et votre code.
Merci.