CSS - Positionnement des éléments de bloc. Bases de CSS et HTML. Disposition des blocs. Leçon sur la disposition des blocs
La mise en page avec des blocs div est depuis longtemps devenue une norme et présente de nombreux avantages par rapport à la mise en page tabulaire. Cependant, en réalité, les développeurs novices sont confus quant au comportement de ces mêmes blocs.
Examinons les principaux points de la disposition des blocs. Maintenant, nous ne prendrons pas en compte la norme HTML5, mais examinerons simplement les bases de la mise en page avec des blocs div, qui sont utilisés lors de la création d'une mise en page ou d'un composant de page individuel.
Qu'est-ce qui est considéré comme un élément de bloc ?
La zone d'un tel élément sur la page est représentée par un rectangle ; par défaut, il occupe toute la largeur disponible et commence sur une nouvelle ligne.
L'élément le plus couramment utilisé dans la disposition en blocs est l'élément universel.
Donc du simple au complexe. Voyons comment les divs apparaissent par défaut sans que les styles n'affectent leur position. Pour plus de clarté, nous ajouterons des styles aux éléments en ligne, via l'attribut style.
Ajoutons une valeur de largeur pour chaque bloc :
On voit que chaque bloc, selon le cahier des charges, est situé sur une nouvelle ligne. C'est leur comportement normal.
Maintenant la question se pose, comment positionner blocs div sur une seule ligne, l'un après l'autre ?
A cet effet, il existe une propriété qui détermine de quel côté le bloc sera forcé de s'aligner. En même temps, depuis l’autre bord, il peut contourner d’autres éléments.
La propriété float a les significations suivantes :
- gauche - le bloc est aligné sur le bord gauche, s'écoulant vers la droite
- à droite - le bloc est aligné sur le bord droit et coule vers la gauche
- none - aucun emballage n'est spécifié, le bloc se comporte par défaut, comme dans les exemples précédents.
Ajoutons float:left à nos blocs pour que les blocs soient alignés à gauche :
En conséquence, les blocs se sont alignés sur une seule ligne. D'accord, disons que nous voulions ajouter un autre div en bas, et nous le ferons sans spécifier la propriété float :
Bloc 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Bloc 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Bloc 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Unité 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Bloc 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Bloc 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Bloc 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Unité 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Pourquoi est-ce arrivé ? En bref, cela se produit parce que les éléments flottants tombent hors du flux du document. Cependant, il s'agit d'un sujet pour un article séparé. Nous allons ici nous familiariser avec la nouvelle propriété qui contrôle le comportement des éléments flottants :
- gauche - désactive le retour à la ligne sur le côté gauche, tous les éléments seront affichés sur une nouvelle ligne (sous l'élément)
- à droite - empêche l'élément de s'enrouler sur le côté droit
- les deux - interdit d'envelopper un élément des deux côtés ; il est recommandé de l'utiliser lorsque vous devez clairement afficher l'élément sur une nouvelle ligne ou si l'on ne sait pas de quel côté il est possible d'enrouler d'autres éléments ;
Ajoutons la propriété clear:left au bloc 4, ce qui empêchera cet élément de circuler autour d'autres éléments flottants sur le côté gauche.
Bloc 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Bloc 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Bloc 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Unité 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Le bloc 4 est placé sur une nouvelle ligne, selon nos besoins.
Dans ce cas, nous savons comment se trouvent les autres blocs, donc dans l'exemple nous avons immédiatement indiqué clear:left. Il y a des situations où nous ne savons pas exactement de quel côté le bloc flottant se rencontrera, donc dans de tels cas, il vaut la peine de préciser clear:both, ce qui annule le flux des deux côtés. Nous avons maintenant compris comment positionner les blocs div horizontalement sur une seule ligne.
Gardez à l'esprit que les blocs flottants sont placés sur la même ligne si la largeur de l'élément parent le permet. Si les éléments du bloc ne tiennent pas dans une ligne, ils seront renvoyés sur une nouvelle ligne. Si cela est critique, par exemple lors de la mise en page, vous devez en tenir compte et pour les blocs avec float, assurez-vous de définir la largeur - fixe (px) ou élastique (%, rem, etc.). Examinons ensuite de telles situations.
Comment influencer les blocs si on veut placer ces blocs au centre ?
La solution classique serait d'ajouter un parent aux blocs et d'utiliser la propriété margin: 0 auto;
Pourquoi avons-nous donné au parent le class.wrapper ? « wrapper » signifie « wrapper ». C'est une sorte de pratique généralement acceptée, définissant le nom de la classe, selon laquelle un élément enveloppe d'autres blocs et permet ainsi de les contrôler/influencer en changeant le parent lui-même.
Reprenons le balisage des exemples précédents et améliorons-le.
Bloc 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Bloc 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Bloc 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit
Unité 4. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Tout semble simple ici.
Et si nous n’aimons pas que le texte colle étroitement au bord du bloc parent et que nous souhaitons ajouter des champs sans apporter de modifications au balisage, uniquement en utilisant du CSS. Ajoutons la propriété padding aux éléments :
Bloc 1. Lorem
Bloc 2. Lorem ipsum
Bloc 3. Lorem ipsum
Bloc 4. Lorem
Et on voit que notre aménagement s'est effondré ! Le bloc 3 est parti quelque part. Pourquoi est-ce arrivé ? La réponse est simple. En ajoutant des champs aux éléments, nous avons augmenté leur largeur. Maintenant les valeurs sont :
Bloc 1 : 10 + 200 + 10 = 220px
Bloc 2 : 10 + 150 + 10 = 170px
Bloc 3 : 10 + 100 + 10 = 120px
Bloc 4 : 10 + 450 + 10 = 470px
220 + 170 + 120 = 510 pixels
La largeur totale des trois blocs est de 510, ils ne rentrent pas dans la largeur du parent (450) et sont donc transférés sur une nouvelle ligne.
Comment y remédier ? Vous pouvez effectuer les opérations suivantes :
- Réinitialisez les valeurs de largeur pour chaque bloc, en tenant compte des marges. En réduisant la taille des blocs. Tout rentrera à nouveau parfaitement dans une seule ligne. Êtes-vous d’accord que ce soit gênant ? Chaque fois que je vais dans la mise en page et que je modifie quelque chose.
- Utilisez la propriété box-sizing : border-box. De sorte que le calcul est effectué à partir de la largeur totale du bloc. Je vous conseille de découvrir quel est le modèle de bloc CSS.
En utilisant la deuxième option, cela donne ceci :
Bloc 1. Lorem
Bloc 2. Lorem ipsum
Bloc 3. Lorem ipsum
Bloc 4. Lorem
Rassemblons maintenant toutes les informations que nous avons reçues et essayons de créer une mise en page standard simple à trois colonnes avec une mise en page flexible, qui s'étendra jusqu'à un maximum de 900 px, après quoi toute la mise en page sera positionnée au centre.
Créez le balisage de mise en page :
Nous écrivons des styles :
Body ( max-width: 900px; /* limiter la largeur maximale */ margin: 0 auto; ) /* pour tous les blocs à l'intérieur du corps, modifier l'algorithme de calcul de la largeur du bloc et ajouter des marges de 10 px à tous les blocs */ body div ( - webkit-box-sizing : border-box; -moz-box-sizing : border-box ; box-sizing : border-box ; remplissage : #CCA69E ; : gauche; ) .content ( float : gauche ; largeur : 60 % ; ) .right-sidebar ( largeur : 20 % ; arrière-plan : #FF9282 ; float : gauche ; ) .footer ( arrière-plan : #000 ; clair : les deux ; / * désactiver le retour à la ligne des deux côtés, le bloc est affiché sur une nouvelle ligne */ color: #ccc;
Si quelque chose n'est pas clair, demandez dans les commentaires.
Auparavant, la mise en page de type tabulaire était répandue sur Internet, à laquelle cette page est dédiée. Cependant, au fil du temps, cette approche de création de structure de site Web est devenue obsolète et a été remplacée par une disposition en blocs.
Différences entre la disposition en blocs et la disposition en tableau
Si la disposition du tableau implique que le contenu de la page se trouve à l'intérieur de la balise La disposition en blocs est dépourvue des inconvénients de la disposition tabulaire - elle est mieux indexée par les moteurs de recherche, son code n'est pas si tentaculaire et les blocs Le seul inconvénient notable de la disposition en blocs est que les sites créés dessus peuvent s'afficher différemment dans les navigateurs. Pour éviter cela, vous devez rendre la mise en page « multi-navigateur », c'est-à-dire affichée de la même manière par n'importe quel navigateur. Une mise en page de site Web est créée dans un éditeur graphique : elle est marquée où se trouvera quelle zone de la page (en-tête, bas, barre latérale, contenu principal) et combien d'espace elle prendra, des images et des arrière-plans sont préparés. Chaque partie de la page est placée dans son propre bloc Le document HTML final est une collection de blocs
, alors le concept de disposition en bloc est basé sur l'utilisation active de balises universelles
est un tableau qui doit être utilisé pour afficher des données tabulaires et rien de plus.
L'essence de la disposition des blocs