Les mises en page peuvent être l’une des choses les plus difficiles à maîtriser en matière de CSS, bien qu’elles soient indéniablement l’une des plus importantes. Dans ce petit conseil, nous allons examiner le flux de documents normal et comment il peut vous aider avec vos mises en page..
introduction
Avant d’expliquer ce que signifie flux de documents normal, je dois expliquer les différents types d’éléments HTML et leur affichage par défaut..
Nous allons nous concentrer sur les deux principaux types d'éléments HTML, à savoir les éléments "au niveau du bloc" et "en ligne". Depuis l'avènement de HTML5, nous avons une catégorisation plus spécifique des éléments (phrasé, flux et sectionnement), bien que les navigateurs s'appuient toujours sur les définitions de bloc et les définitions en ligne..
Ceci est un exemple de plusieurs éléments en ligne tous contenus dans un paragraphe, y compris une ancre une duréeet une balise d'emphase.Redimensionnez le navigateur et vous verrez comment un navigateur gère ces éléments en ligne par défaut. C'est vrai, tout s'affiche sur une ligne et se termine lorsqu'il n'y a plus de place.
Voir cette démo d'élément en ligne en action.
Les éléments de niveau bloc cependant, tels que divs et paragraphes, plus les nouveaux membres HTML5 comme article et section, ont des propriétés très différentes par défaut. Les éléments de niveau bloc contiennent normalement, mais pas toujours, des éléments en ligne ou d'autres éléments de niveau bloc. Considérez-les comme l’élément "structurel" des deux.
Les navigateurs formateront (par défaut) les éléments de niveau bloc avec un saut de ligne avant et après. En d’autres termes, les éléments de niveau bloc commenceront toujours sur une nouvelle ligne (s’empilant comme des blocs), sauf indication contraire..
Coiffant
Dans tous les cas, nous pouvons modifier l'affichage d'un élément à l'aide de la propriété d'affichage CSS:
element display: block; / * ou en ligne, par exemple * /
Ces caractéristiques d’affichage dictent également ce que nous pouvons d’autres styles. Par exemple, nous sommes libres de déterminer la largeur et la hauteur d'un élément de niveau bloc, mais pas avec les éléments en ligne. Le rembourrage et les marges peuvent être appliqués aux éléments en ligne, mais ils n'influenceront pas les dimensions de l'élément conteneur. Jetez un oeil à cet exemple pour voir ce que je veux dire:
Les autres
Outre les attributs communs de bloc et d'affichage en ligne, il existe quelques exemples moins fréquemment rencontrés. Par exemple, que se passe-t-il si vous souhaitez afficher un élément en ligne, mais le styler comme un élément de niveau bloc? Entrer le bloc en ligne valeur. Les éléments de bloc en ligne conservent des propriétés telles que la largeur, la hauteur, la marge et le remplissage appliqués aux éléments de niveau bloc, tout en conservant les qualités structurelles d'un élément en ligne..
Inline-Block est une alternative potentielle aux éléments flottants, mais n'est certainement pas sans problèmes dans ces circonstances.
Une autre valeur d'affichage, qui n'est pas aussi bien utilisée est élément de liste, qui fait exactement ce qu'il dit sur l'étain. Chaque élément auquel la valeur d'élément de liste est appliquée est affiché verticalement, comme on pouvait s'y attendre dans une liste, mais ils sont également accompagnés de points. Ceci est utile pour lister des données, c'est-à-dire une liste de noms, et décrit logiquement la liste d'éléments tels que ceux-ci:
Charles Mahogany Biggins
Tiggy Wiggins Hortensia
Foxy Bumpkins Numpty
sont affichés par défaut.
Enfin, la dernière valeur d’affichage à mentionner est «aucune». Pouvez-vous deviner ce que ça fait? C'est exact, tout élément dont la propriété d'affichage est définie sur "aucun" n'apparaît tout simplement pas sur la page; il est visuellement (avec tous les éléments qu'il contient) supprimé du document. Le balisage pour cet élément est toujours envoyé au navigateur, mais il ne génère pas de boîte et est caché de la vue - les lecteurs d'écran ne le prendront pas non plus. Il ne prend aucune place, alors d'autres éléments peuvent prendre sa place.
Alors, quel est le flux de documents normal?
C'est la façon dont une page est présentée quand vous ne faites rien pour ce qui est du style structurel.
Compte tenu de ce qui précède, qu’est-ce que Normal Document Flow? C'est la façon dont une page est présentée lorsque vous n'y faites rien en ce qui concerne le style structurel. Les navigateurs affichent le contenu dans l'ordre dans lequel il a été rencontré. top des choses en premier, le contenu de la procédure plus bas.
Lorsque les gens se lancent dans la conception Web, ils sont souvent impatients de faire face à toutes sortes de trucs fantaisistes, sans apprendre les bases et les principes fondamentaux. Si vous comprenez le flux de documents normal, vos conceptions Web en seront d'autant meilleures!
Exercice: le balisage
Commençons par créer une simple galerie de photos avec du CSS très basique. J'ai rapidement créé un fichier html pour commencer. Après tout, nous nous concentrons principalement sur le style. Copiez le code ci-dessous dans votre éditeur de texte et j'expliquerai ce qu'il y a dedans.
Flux de documents normal
Une introduction au flux de documents normal.
Bienvenue dans ma galerie de photos!
Je suis l'homme sans nom, Zapp Brannigan! Bender, être Dieu n'est pas facile. Si vous en faites trop, les gens deviennent dépendants de vous et si vous ne faites rien, ils perdent espoir. Vous devez utiliser une touche légère. Comme un safecracker ou un pickpocket. Hé, devine à quoi tu es accessoire. Leela, Bender, nous allons piller la tombe. Aussi Zoidberg. Oh cher! Elle est coincée dans une boucle infinie et c'est un idiot! Eh bien, c'est l'amour pour toi.
Puis-je utiliser le pistolet? Oh non! Le professeur va me frapper! Mais si Zoidberg "le corrige"… alors peut-être des cadeaux! Frire! Arrête de faire la bonne chose, imbécile! Qui est assez courageux pour voler dans quelque chose que nous appelons tous une sphère de la mort? Je n'ai plus rien ressenti depuis la mort de mon cobaye.
Il y a un bloc CSS vide en haut. C'est ici que nous commencerons à styler. Ci-dessous se trouve un lien conditionnel vers le script HTML5 Shiv qui aidera Internet Explorer à reconnaître et à afficher correctement les éléments HTML5. En dessous, la balise body obligatoire. À l'intérieur de la balise body se trouve le conteneur de la page entière, ainsi que celui de la galerie de photos. J'ai utilisé placekitten pour obtenir des images de substitution, et Fillerama pour le texte de remplissage. Donc c'est à peu près tout.
Bon, alors maintenant, juste pour montrer comment fonctionne le flux de documents normal, jetez un œil à la page que vous venez de créer. Comme vous vous en doutez, non? Les images s’affichent sur une ligne, jusqu’à la largeur de l’élément parent; dans ce cas, le chiffre (défini sur 100% de la fenêtre, mais probablement avec quelques marges par défaut) est rempli. Et bien que vous ne le voyiez pas encore, tous les éléments de niveau bloc, tels que la div, la figure et l'article, sont sur leur propre ligne..
C'est le flux de documents normal en action. Maintenant, redimensionnez le navigateur pendant une seconde. Oui, c'est fluide! Peut-être pas complètement fluide comme nous en sommes venus à le comprendre - les images conservent leurs dimensions quel que soit le viewport. Pourtant, vos mises en page seront toujours fluides par défaut.
Exercice: Le CSS de base
Juste pour prouver que je ne tire pas votre jambe sur les éléments de niveau bloc, ajoutons-leur des couleurs d'arrière-plan. Dans votre bloc de code CSS en haut du fichier HTML, ajoutez ceci:
Maintenant, après avoir ajouté des couleurs d’arrière-plan, vérifiez le résultat. La manière dont les éléments de niveau bloc sont affichés.
Exercice: La mise en page CSS
Le style ci-dessous ne contient que les propriétés CSS du modèle de boîte (largeur, marge, remplissage, etc.), mais il montre combien très peu de CSS peut créer des mises en page solides..
Dans cette CSS, nous avons désigné la largeur du conteneur à 65%. Nous aurions également pu utiliser une valeur de pixel fixe, mais les pourcentages conservent la nature fluide du document et démontrent le flux de documents plus efficacement. Nous avons également centré la page en utilisant marge: 0 auto.
Le reste concerne l'esthétique. J'ai ajouté un peu de rembourrage pour donner un peu de répit à chaque chose, spécifié les polices et les couleurs de police, c'est tout..
Enregistrez ce document et affichez-le dans votre navigateur.
Chaque fois que je travaille sur un projet, je réfléchis toujours à son apparence dans le flux de documents normal. Cela me permet de réfléchir à la manière dont je peux l’améliorer avec le moins de CSS possible..
Conclusion
En utilisant les principes que nous avons appris aujourd'hui, essayez de construire vos propres exemples. Vous constaterez que (structurellement), vous pouvez réaliser pas mal de choses avant d'entrer dans les détails techniques des flotteurs et du positionnement..
Ressources supplémentaires
Eléments en ligne sur le réseau de développeurs Mozilla
Éléments de niveau bloc sur le réseau de développeurs Mozilla
Modèle de formatage visuel par le W3C
La déclaration d'affichage sur QuirksMode
CSS display: inline-Block: Pourquoi ça bouge et pourquoi ça craint par Robert Nyman
Quel est le problème avec Display: Inline-Block? par Josh Johnson
Ne pas utiliser display: none pour cacher visuellement le contenu destiné aux lecteurs d’écran sur 456 Berea St.
Accentsconagua
Share
