. C'est semblable à la brique lors de la construction d'un bâtiment. S'il constitue la base et la conception du site, il n'est cependant pas le seul. Comme les portes, fenêtres, ventilations, balcons, etc., d'autres éléments HTML sont utilisés pour la mise en page. Ce sont des liens, des formulaires, des images, des listes et des tableaux.
nous a permis de rendre le code plus compact et plus clair. Le passage à la mise en page en bloc a permis de débarrasser le HTML des éléments inutiles, à savoir les styles. A permis de supprimer complètement la disposition des tableaux surchargée et difficile à naviguer.
Utilise activement la disposition des blocs CSS. À l'aide des outils disponibles, vous pouvez créer n'importe quelle mise en page avec une précision au pixel près. Cette disposition est appelée pixel parfait. Cela implique une parfaite adéquation entre le site et l’aménagement. La photo ci-dessus montre que tout n'est pas si simple avec la disposition en blocs. Au début, il était tout simplement impossible de se passer de tables. Ceux-ci ont été utilisés pour créer la mise en page principale des pages et des blocs ont été utilisés pour les éléments individuels. C'était le cas jusqu'à ce qu'ils apprennent à régler la hauteur des blocs.
Avantages
La mise en page du site Web en bloc présente les avantages suivants :
La poursuite du développement
Actuellement, la disposition block div est obsolète et n’a qu’une utilisation limitée, uniquement comme cas particulier pour certaines situations. Il a été remplacé par le positionnement et la fluidité dans la mise en page. Ils présentaient de nombreuses lacunes, mais dans l’ensemble, ils permettaient plus qu’une simple disposition en blocs.
Vint ensuite la construction utilisant des éléments de blocs en ligne. Cela a grandement facilité le travail des programmeurs. Cette méthode tire parti des deux types de blocs et vous permet de créer une conception plus réactive et adaptative. Il convient de noter que toutes ces méthodes consistaient d'une manière ou d'une autre en un élément div, ce qui lui a valu le nom de « mise en page merveilleuse ».
Actuellement, Flex-box et bootstrap sont utilisés pour créer la page. Ils réduisent considérablement le code et permettent de créer plus rapidement et plus facilement un design réactif de haute qualité. Ils vous permettent de déplacer des blocs sans casser la page entière.
À la pointe du progrès se trouve une nouvelle technologie : les grilles. Il vous permet de créer un design de toute complexité très rapidement et facilement. Et les blocs, le flux, le positionnement, comme cela se produisait autrefois avec les tables, ne sont utilisés que pour l'usage auquel ils sont destinés.
La mise en page Div est un modèle actuel pour la création de sites Web.
De nouveaux sites apparaissent constamment sur Internet : portails d'actualités, blogs et pages personnelles. Presque chacun d'entre eux est créé sur la base d'un modèle de bloc, dont la base est constituée de blocs DIV. Aujourd'hui, nous allons comprendre cette technologie et considérer les principales nuances de la disposition div.
Flux de documents HTML
Si l'on rappelle que le langage HTML permet de structurer des informations hypertextes, il devient clair que tout site, à la base, est un ensemble de blocs : images, texte, liens, etc. Nous ne parlons pas spécifiquement des DIV pour le moment, mais ce sont des sujets étroitement liés.
Nous disposons donc d'un certain flux de données à partir duquel la page HTML est assemblée. Il existe actuellement deux types d'éléments structurels : en bloc et en ligne. Les blocs de blocs, dans un flux HTML normal, sont situés les uns après les autres dans un ordre vertical. Dans le même temps, par défaut, la largeur du bloc occupe tout l'espace disponible par rapport à la page ou à l'élément parent. À leur tour, les éléments en ligne sont disposés les uns après les autres dans un ordre horizontal.
Les principaux représentants de ces deux catégories sont les balises div et span.
Par conséquent, si nous parlons d'un flux HTML normal, tous les blocs div seront situés les uns sous les autres et la durée sera alignée.
Comme vous le comprenez, vous ne pourrez pas créer un balisage normal pour un site Web à l'aide d'éléments en ligne. Par conséquent, il y a plusieurs années, pour remplacer la disposition des tableaux, ils ont décidé d'utiliser une disposition basée sur des blocs DIV.
Mise en page du site DIV
Ainsi, les blocs DIV ont commencé à être utilisés pour baliser le site. En les utilisant, il a été possible de dessiner la mise en page principale et de créer des blocs supplémentaires pour tous les types de contenu nécessaires.
Examinons ce processus en utilisant l'exemple d'une page standard, qui comprend un en-tête, un bloc de contenu, une barre latérale et un pied de page.
C'est une option classique. Le logo est le plus souvent situé dans l'en-tête du site, et les liens de navigation dans le bloc latéral. Le bloc principal est utilisé pour afficher des informations - articles, descriptions d'entreprises, archives photo, etc. Dans le bloc inférieur, vous pouvez insérer une adresse, des contacts et d'autres informations de service.
Comme vous pouvez le voir sur l'image, nous utilisons les blocs principaux suivants pour mettre en page la mise en page :
Le bloc Main est utilisé comme conteneur pour tout le contenu. En-tête - en-tête du site. Nav - bloc de navigation. Contenu - informations et contenu de base. Pied de page - pied de page du site.
Chacun de ces blocs est un conteneur DIV. Mais en théorie, les blocs devraient se suivre. Nous devons obtenir la disposition décrite ci-dessus afin que les blocs aient la structure suivante :
Et en plus, ils seraient situés sur la page de la même manière que nous le voyons sur le modèle. Comment pouvons-nous y parvenir? Pour cela, nous utiliserons des propriétés pour les blocs DIV, ce qui nous permettra de les positionner de la manière souhaitée, les uns par rapport aux autres et à la page dans son ensemble.
Mais d'abord, créons la base HTML de notre mise en page et donnons des noms aux blocs afin de pouvoir travailler avec des feuilles de style.
Cadre HTML
Si nous ignorons toutes les balises de service, le squelette de notre site ressemblera à ceci.
Pour chaque bloc, une classe est attribuée. Avec son aide, nous définirons les styles du bloc - cela nous aidera à atteindre l'emplacement souhaité sur la page.
Il est temps de se familiariser avec les styles et les propriétés utilisés pour la mise en page div du site.
Styles CSS
Si quelqu'un ne le sait pas déjà, les feuilles de style CSS sont utilisées depuis longtemps dans le développement de sites Web. Avec leur aide, vous pouvez modifier n'importe quel élément de la page. Cela s’applique à la fois à la conception visuelle du bloc, à son emplacement et à son échelle.
Flotter
Tout d'abord, jetons un œil à la propriété qui permet de positionner un DIV à droite ou à gauche de la page ou par rapport à son conteneur parent.
Une petite retraite. Chaque fois que nous attribuons un style à un bloc, celui-ci modifiera ses propriétés (taille, emplacement) par rapport au conteneur parent.
La propriété float a quatre valeurs : aucun, droite, gauche, héritage.
Nous nous intéressons à la signification de « gauche » et de « droite ».
La valeur float indique de quel côté notre bloc sera affiché. Tous les autres blocs circuleront autour de lui du côté opposé.
Dans notre cas, pour le bloc de navigation nous devons spécifier la valeur left , et pour le contenu principal la valeur right . Voici à quoi cela ressemblera dans le fichier de style :
Nav ( float:gauche; ) .content ( float:droite; )
À propos, vous ne pouvez définir la propriété que pour le bloc de navigation. Le bloc de contenu sera automatiquement situé à droite de la navigation. Ceci sera réalisé grâce au float obtenu en définissant la propriété float.
Marges en CSS : marge et remplissage
Comprenons maintenant deux propriétés importantes utilisées dans la mise en page basée sur div. Ils sont responsables de l'indentation. Le moyen le plus simple de comprendre l’essence de leur travail est de prendre un exemple.
Imaginons ce que nous devons faire pour que notre bloc principal MAIN ait une légère indentation par rapport à l'en-tête du site. Ceci peut être réalisé en attribuant une propriété margin au div avec la classe principale. Il est responsable du rembourrage externe du bloc.
La propriété margin a les valeurs suivantes : [value | intérêt | automatique] (1,4) | hériter.
Ainsi, vous pouvez spécifier le décalage en pixels, en pourcentage, pour chaque côté tour à tour.
Il est possible de définir uniquement un certain retrait, par exemple sur la face supérieure. C'est exactement notre cas. Voici comment cela sera mis en œuvre :
Principal ( margin-top:10px; )
Notre bloc principal aura désormais un remplissage supérieur de 10 pixels.
Concevons maintenant un bloc avec navigation et contenu. Imaginez que nous ayons déjà un site Web prêt à l'emploi. Tous les liens de navigation sont situés près du bord gauche de la page. Et le texte du bloc de contenu, au contraire, est étroitement adjacent au côté droit. Un design assez désagréable. Nous devons faire un rembourrage interne.
La propriété padding en est responsable, avec les valeurs suivantes : [value | pour cent] (1, 4) | hériter
Le principe ici est le même qu'avec la propriété margin : vous pouvez définir le retrait de chaque côté séparément.
Nav ( float:gauche; padding-left: 15px; ) .content ( float:right; padding-right: 20px; )
En utilisant ces propriétés de base, vous pouvez obtenir la disposition souhaitée des blocs DIV. En conséquence, vous recevrez une mise en page de site Web prête à l'emploi, et il ne reste plus qu'à la remplir avec les informations nécessaires.
Vidéo pour l'article :
Conclusion
Nous n'avons considéré que les propriétés de base. En réalité, il y en a beaucoup plus. Mais dans tous les cas, les informations fournies seront toujours utilisées dans la mise en page div.
Pourquoi chercher des informations sur d’autres sites si tout est rassemblé ici ?
La série d'articles de l'auteur consacrée à bases de la mise en page de sites Web en bloc. C'est le premier endroit pour commencer à étudier le sujet. création de site web. Les leçons seront utiles à ceux qui souhaitent apprendre les bases HTML et CSS non seulement en théorie, mais en pratique.
Au fur et à mesure que nous étudions le sujet, nous créerons un site Web, un site Web classique, sans cloches ni sifflets particuliers, mais plutôt sympa.
Dans les leçons, je parle simplement et clairement de la mise en page de sites Web basée sur des blocs et bien plus encore. Si vous souhaitez comprendre rapidement les bases mises en page de sites Web, alors cette série d’articles sera exactement ce dont vous avez besoin.
Qu’est-ce que la disposition des blocs ?
Ce qui s'est passé bloquer la mise en page du site Web et tu le manges avec quoi ?
Auparavant, les sites Web étaient conçus à l’aide de tableaux. Chaque élément de la page, qu'il s'agisse d'un titre, d'un texte ou d'une image, se trouvait dans sa propre cellule. Ces cellules pullulaient dans d'autres cellules plus grandes, et celles-ci, à leur tour, se trouvaient dans la cellule principale, c'est-à-dire dans la page du site elle-même.
La mise en page tabulaire est désormais obsolète, même si de nombreux webmasters continuent de l'utiliser. Son gros inconvénient est son code lourd. Après tout, chaque petite cellule doit être désignée par certaines balises.
Disposition des blocs- une chanson complètement différente. Ici, tous les éléments de la page sont situés dans des blocs spéciaux appelés divs. À la base, ils ressemblent quelque peu aux mêmes tableaux. Une boîte est une boîte en Afrique aussi. Mais les blocs sont bien plus pratiques, plus simples et plus fonctionnels.
Bloc dans la mise en page d'un site Web, il s'agit d'une zone rectangulaire régulière qui possède un certain nombre de propriétés, telles que : le cadre, les marges et les retraits. Le contenu du bloc peut être n'importe quoi : un morceau de texte, une image, une liste, un formulaire à remplir, un menu de navigation, etc.
Cadre- il s'agit du contour d'un bloc pour lequel vous pouvez définir des caractéristiques telles que l'épaisseur, la couleur et le type (pointillé, plein, pointillé).
Champs (remplissage)- séparer le contenu du bloc de son cadre afin que le texte, par exemple, ne soit pas « bout à bout » contre les parois du bloc.
Marges- c'est l'espace vide entre différents blocs, permettant de positionner deux blocs l'un par rapport à l'autre à une distance donnée.
Les blocs, comme les tableaux, sont toujours disposés verticalement sur la page. Autrement dit, si deux blocs sont écrits à la suite dans le code de la page, ils seront affichés dans le navigateur l'un en dessous de l'autre. Si nous devons disposer plusieurs blocs horizontalement sur une seule ligne, alors dans leurs propriétés, nous définissons un paramètre tel que " circuler"(flotter). Mais plus là-dessus plus tard.
Disposition en bloc du site. Mots clés
Étiqueter est une construction particulière du langage HTML. Distinguer ouverture Et fermeture Mots clés. Ne les confondez pas avec les hashtags des réseaux sociaux, ou les tags sur les sites internet, ce sont des choses différentes !
Dans le cas le plus simple, une étiquette est comme une partie d'un jeu de construction pour enfants, qui a son propre objectif strict : une barre signifie une barre, une roue signifie une roue et rien d'autre. Par exemple, une balise de paragraphe :
Texte du paragraphe.
est toujours désigné par la lettre p et rien d'autre. C'est son nom.
Les balises sont toujours placées entre crochets. Comme vous pouvez le voir dans l'exemple, il existe une balise d'ouverture et de fermeture. La balise de fermeture a une barre oblique ajoutée avant le nom - une barre oblique / .
Toutes les balises n'ont pas une paire de fermeture. Par exemple, la balise d'image img ne l'a pas du tout. Mais afin de se conformer aux normes modernes et aux exigences de la spécification XHTML, ils ajoutent toujours un espace avec une barre oblique avant le crochet angulaire fermant. Cela ressemble à ceci :
balise div
La balise div est la base de la disposition des blocs. Ce sont ces mêmes cubes à partir desquels tout le site est construit. Cette balise est neutre. Contrairement aux balises HTML standard, qui sont strictement liées à leur contenu (p - aux paragraphes, a - aux liens, img - aux images), la balise div peut contenir n'importe quoi et autant de choses que vous le souhaitez. Considérez-le comme une grande boîte dans laquelle tous les jouets sont jetés.
La balise div est utilisée pour définir zones fonctionnelles sur la page. Par exemple, comme : « en-tête », bloc de navigation, bloc de contenu principal, « pied de page » ou pied de page à notre avis.
La balise div, comme toute autre balise, possède ses propres attributs.
Attribut- caractéristiques descriptives de l'étiquette. Autrement dit, ce qu'il peut faire et comment. Par exemple, prenons une balise d'image :
Dans ce cas, src, width, height, alt sont des attributs de balise. Entre guillemets (et c'est aussi une exigence obligatoire des normes modernes) sont donnés valeurs les attributs.
Il n'est pas difficile de déchiffrer un tel enregistrement. La balise indique qu'à cet endroit de la page, vous devez joindre l'image risunok.jpg du dossier images. La largeur de l'image est de 200 pixels, la hauteur est de 50 pixels. Et au tas, un texte alternatif a été ajouté pour expliquer ce qui est montré dans l'image.
À propos, le texte alternatif n’est pas un caprice, mais aussi une exigence nécessaire. Tous les internautes n’ont pas une bonne vue. Quelqu'un utilise un programme de reconnaissance et de lecture de texte. Et certaines personnes désactivent simplement l'affichage des images dans le navigateur. C'est pourquoi il existe des légendes alternatives pour les dessins.
S'il ne sert à rien de les signer (par exemple, un marqueur de liste ou une sorte de flèche), alors l'attribut alt reste avec un espace vide entre les guillemets.
Attributs des balises div
La balise div n'a que deux attributs :
id - un attribut qui vous permet d'attribuer unique valeur, c'est-à-dire celle qui est utilisée sur la page juste une fois. Par exemple, en-tête ou pied de page.
De cette façon, nous pouvons définir davantage certains paramètres dans la feuille de style pour la balise div avec l'attribut id et la valeur d'en-tête, et des paramètres complètement différents pour le pied de page. Et le navigateur reconnaît correctement que ce morceau de texte appartient au « header » et sera tapé, par exemple, en gros caractères rouges, mais celui-ci appartient au « footer » et sera tapé en petits caractères gris. Et pas de confusion !
class est un attribut qui permet d'attribuer la même valeur à plusieurs éléments. Par exemple, ajoutez un cadre de même épaisseur et couleur à toutes les images de la page. Comme il y a plusieurs images, l'attribut id ne peut plus être utilisé, nous utilisons donc class .
Pour la première fois, je pense que c'est suffisant. Si quelque chose n’est pas clair concernant la disposition en blocs des sites Web, demandez-le dans les commentaires.
À suivre. Reste en contact!
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.
Bloc 1
Bloc 2
Bloc 3
Ajoutons une valeur de largeur pour chaque bloc :
Bloc 1
Bloc 2
Bloc 3
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 et coule 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 :
Bloc 1
Bloc 2
Bloc 3
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 avez clairement besoin d'afficher l'élément sur une nouvelle ligne ou que l'on ne sait pas de quel côté il est possible d'envelopper 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.
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 va se rencontrer, 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.
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 le réparer? 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 j'entre 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
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 la mise en page entière sera positionnée au centre.
Créez le balisage de mise en page :
Document
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit rem fugit itaque, est impedit aperiam a autem repellat vitae porro ex expedita, cumque nulla, velit. Soluta velit eos, quia. Fugiat voluptate nisi aliquid eum sapiente sunt nobis, adipisci assumenda earum !
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: 10px; ) .header ( arrière-plan: #CCA69E; remplissage: 10px; ) .left- barre latérale (largeur : 20 % ; arrière-plan : #8ED9B6 ; float : gauche ; ) .content ( float : gauche ; largeur : 60 % ; ) .right-sidebar ( largeur : 20 % ; arrière-plan : #FF9282 ; float : gauche ; ) .footer ( background : #000 ; clear : les deux ; /* désactive 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.
Il pourrait être utile de lire :