Exemple de mise en page CSS du didacticiel Web front-end

Mise en page CSS

La mise en page est une partie importante du CSS. mise en page Les techniques couramment utilisées, y compris les méthodes de centrage horizontal et de centrage vertical couramment utilisées, ainsi que diverses méthodes de mise en œuvre de mise en page à une seule colonne et de mise en page à plusieurs colonnes (y compris la mise en page traditionnelle du modèle de boîte et la mise en œuvre relativement nouvelle de la mise en page flexible), espèrent l'amener à amis qui ont besoin d'aide.

Table des matières

1. Méthodes de centrage couramment utilisées : centrage horizontal, centrage vertical,

2. Disposition sur une seule colonne

3. disposition en colonnes et en trois colonnes : flotteur+marge, position+marge, disposition du Saint Graal (flotteur+marge négative), disposition double aile volante (flotteur+marge négative), disposition flexible

Si vous voulez apprendre et communiquer avec des technologies Web frontales telles que html5css3 et souhaitez en savoir plus sur les aspects front-end. Pour le contenu, vous pouvez rejoindre notre groupe d'apprentissage QQ : 27062964 pour apprendre et communiquer ensemble, vous améliorer et partager du matériel d'apprentissage et du code source. Ou cliquez sur le lien pour rejoindre directement le groupe QQ :

Résumé

Méthodes de centrage couramment utilisées

Centrage. est très courant dans les mises en page , nous supposons que la structure du document DOM est la suivante et que les éléments enfants doivent être centrés dans l'élément parent :

Centré horizontalement

Que l'élément enfant soit un élément en ligne ou un élément bloc, la largeur est certaine ou indéterminée, le schéma de disposition adopté est différent. Analyse ci-dessous :

Éléments en ligne : définissez text-align:center sur l'élément parent ;

Éléments de bloc à largeur fixe : définissez les valeurs de marge gauche et droite sur auto

Élément de bloc à largeur variable : définissez l'élément enfant sur display:inline, puis définissez text-align:center;

Solution générale sur l'élément parent : mise en page flexible, définissez display:flex;justify-content :center; sur l'élément parent ;

Centrage vertical

Le schéma de centrage vertical est différent pour le texte en ligne sur une seule ligne, le texte en ligne sur plusieurs lignes et les éléments de bloc.

L'élément parent est certain et l'élément enfant est une seule ligne de texte en ligne : définissez la hauteur de l'élément parent égale à la hauteur de la ligne line-height

L'élément parent est certain , et l'élément enfant est un texte en ligne multiligne : définissez l'élément parent display:table-cell ou inline-block, puis définissez vertical-align:middle;

Élément Block : définissez la position de l'élément enfant :fixed (absolu), puis définissez margin:auto;

Solution générale : mise en page flexible, définissez {display:flex; align-items:center;} sur l'élément parent.

2. Disposition sur une seule colonne

Caractéristiques : largeur fixe, centrage horizontal

Il existe deux points communs. dispositions à une seule colonne Type :

La première est que les largeurs de l'en-tête, du contenu et du pied de page sont toutes les mêmes, ce qui n'occupe généralement pas la largeur maximale du navigateur, mais lorsque la largeur du navigateur est réduite en dessous de son maximum largeur, la largeur s'adaptera.

La première est que la largeur de l'en-tête et du pied de page correspond à la largeur du navigateur, mais le contenu et le contenu de l'en-tête et du pied de page n'occuperont pas la largeur du navigateur.

Pour le premier type, définissez uniformément la largeur ou la largeur maximale pour l'en-tête, le contenu et le pied de page, et utilisez margin:auto pour réaliser le centrage.

Document DOM :

Manifeste CSS :

Pour le deuxième type, la largeur du contenu de l'en-tête et du pied de page est de 100 %, mais la zone de contenu et le contenu de l'en-tête et du pied de page sont définis uniformément sur la largeur maximale et centrés sur margin:auto.

Document DOM :

Manifeste CSS :

3. Disposition à deux et trois colonnes

La caractéristique de la disposition à deux colonnes est que la barre latérale a une largeur fixe de la colonne principale. La disposition à trois colonnes est caractérisée par deux colonnes à largeur fixe des deux côtés et une largeur adaptative dans la colonne du milieu.

La raison pour laquelle la mise en page à deux colonnes et la mise en page à trois colonnes sont écrites ensemble est que la mise en page à deux colonnes peut être considérée comme une mise en page à trois colonnes avec une barre latérale supprimée et que les idées de mise en page sont similaires. Pour la méthode de mise en œuvre traditionnelle, nous discutons principalement des trois premières mises en page dans l'image ci-dessus, la mise en page classique à deux colonnes avec colonnes latérales et la mise en page à trois colonnes avec colonnes latérales gauche et droite. Pour la mise en page flexible, les cinq mises en page dans le. l'image ci-dessus sont mises en œuvre.

a. float+margin

Description du principe : définissez les deux colonnes latérales pour qu'elles flottent respectivement à gauche et à droite, et la colonne du milieu utilise la marge pour libérer de l'espace pour les deux colonnes latérales. de la colonne du milieu Adaptez-vous à la fenêtre du navigateur.

Document DOM :

Étapes de mise en page :

Définissez la largeur des deux colonnes latérales, ajoutez un flotteur gauche à la colonne de gauche et ajoutez un flotteur à la colonne de droite.

Définissez les marges gauche et droite du panneau principal. La valeur de margin-left est la largeur de la colonne de gauche et la valeur de margin-right est la largeur de la colonne de droite.

Liste CSS :

Quelques instructions :

* Faites attention à l'ordre d'écriture du document DOM , écrivez d'abord deux Pour la colonne latérale, écrivez le panneau principal. Après le remplacement, la colonne latérale sera insérée dans la colonne suivante (utilisée à la fois dans la disposition Holy Grail et dans la disposition Double Flying Wing). * Cette méthode de mise en page est relativement simple et claire, mais l'inconvénient est que la barre latérale est affichée en premier au lieu du panneau principal, plus important.

Comment implémenter deux colonnes

S'il s'agit d'une mise en page à deux colonnes avec une barre latérale à gauche, supprimez la colonne de droite et ne définissez pas la valeur de marge droite du panneau principal. Les autres opérations sont les mêmes. vice versa.

b. position+marge

Description du principe : fixez les deux colonnes latérales via un positionnement absolu, faites également de la place pour les deux colonnes latérales via les marges, et la colonne du milieu est adaptative.

Document DOM :

Étapes de mise en page :

Définissez la largeur des barres latérales des deux côtés et définissez la méthode de positionnement Pour un positionnement absolu.

Définissez la valeur supérieure des deux côtés de la colonne sur 0, définissez la valeur gauche de la colonne de gauche sur 0 et définissez la valeur droite de la colonne de droite sur 0.

Définissez les marges gauche et droite du panneau principal. La valeur de margin-left est la largeur de la colonne de gauche et la valeur de margin-right est la largeur de la colonne de droite.

Liste CSS :

Quelques notes :

Par rapport à la méthode précédente, cette méthode La position de la barre latérale est fixée par positionnement.

Si la colonne du milieu a une limite de largeur minimale, ou un élément interne avec une largeur, et que la fenêtre du navigateur est suffisamment petite, le panneau principal et la colonne latérale se chevaucheront.

Comment implémenter deux colonnes

S'il s'agit d'une mise en page à deux colonnes avec une barre latérale à gauche, supprimez la colonne de droite et ne définissez pas la valeur de marge droite du panneau principal. Les autres opérations sont les mêmes. vice versa.

c. Disposition du Saint Graal (flotteur + marge négative + rembourrage + position)

Description du principe :

Réglez la largeur du panneau principal à 100 %, le panneau principal et les deux colonnes latérales sont toutes définies pour flotter, généralement laissées flottantes. À ce moment-là, les deux barres latérales seront évincées par le panneau principal. Tirez la barre latérale flottante vers le haut à travers les marges négatives. La marge négative de la colonne de gauche est de 100 %, ce qui correspond exactement à la largeur de la fenêtre. Par conséquent, elle s'étendra du côté gauche sous le panneau principal jusqu'au côté gauche aligné avec le panneau principal. panneau. La colonne de droite est ici. Lorsque vous flottez vers la gauche sous le panneau principal, définissez la marge négative sur négative et sa propre largeur flotte juste à droite de l'alignement du panneau principal. Afin d'éviter que la barre latérale ne bloque le contenu du panneau principal, définissez les valeurs de remplissage gauche et droite dans la couche externe sur la largeur des barres latérales gauche et droite pour laisser de la place aux barres latérales. du panneau principal est réduit. Étant donné que les marges négatives des barres latérales sont relatives au panneau principal, les deux barres latérales ne s'ancreront pas sur les côtés gauche et droit comme nous le souhaitons idéalement, mais se rapprocheront du milieu avec le panneau principal réduit. À ce stade, utilisez la disposition relative et ajustez les deux barres latérales aux positions correspondantes.

Document DOM :

Étapes de mise en page :

Tous les trois sont prêts à flotter vers la gauche.

Réglez la largeur principale à 100 % et définissez la largeur des deux colonnes latérales.

Définissez la marge négative, sous-définissez la marge gauche négative à 100 %, définissez en plus la marge gauche négative sur sa propre largeur négative.

Définissez la valeur de remplissage de main pour laisser de l'espace pour les sous-panneaux gauche et droit.

Réglez les deux sous-panneaux sur un positionnement relatif, la valeur gauche de sub est la sous-largeur négative et la valeur droite de extra est la largeur supplémentaire négative.

Liste CSS :

Quelques notes

L'ordre d'écriture des éléments DOM ne doit pas être modifié.

Lorsque la partie principale du contenu du panneau est plus petite que la largeur des sous-panneaux des deux côtés, la mise en page sera gâchée. Vous pouvez éviter les problèmes en définissant l'attribut min-width de main ou en utilisant une disposition à double aile.

Comment implémenter deux colonnes

S'il s'agit d'une mise en page à deux colonnes avec une barre latérale à gauche, supprimez la colonne de droite et ne définissez pas la valeur de remplissage à droite du panneau principal. Les autres opérations sont les mêmes. vice versa.

d. Disposition des ailes volantes doubles (flotteur + marge négative + marge)

Description du principe :

Les idées de la disposition des ailes volantes doubles et de la disposition du Saint Graal sont quelque peu similaires, utilisant tous deux des marges flottantes et négatives, mais la disposition à double aile a été améliorée par rapport à la disposition du Saint Graal. Elle ajoute une couche de div à l'élément principal et définit la marge puisque les marges négatives des deux côtés des colonnes sont relatives à l'élément principal. -wrap, les principales modifications de la valeur de la marge n'affecteront pas les deux colonnes latérales, donc l'étape de définition de la disposition relative des deux colonnes latérales est omise.

Document DOM :

Étapes de mise en page :

Tous les trois sont configurés pour flotter vers la gauche.

Réglez la largeur de l'enveloppe principale sur 100 % et définissez la largeur des deux barres latérales.

Définissez la marge négative, sous-définissez la marge gauche négative à 100 %, définissez en plus la marge gauche négative sur sa propre largeur négative.

Définissez la valeur de marge de main pour laisser de l'espace pour les sous-panneaux gauche et droit.

Liste CSS :

Quelques explications

Le Saint Graal utilise du rembourrage, tandis que les doubles ailes volantes utilisent margin , qui résout le problème selon lequel la largeur minimale de la page principale de la mise en page du Saint Graal ne peut pas être plus petite que la colonne de gauche.

La disposition des ailes volantes doubles n'a pas besoin de définir la disposition relative et les valeurs gauche et droite correspondantes.

En introduisant la disposition relative, diverses combinaisons de disposition à trois colonnes peuvent être réalisées. Par exemple, définir la position : relative gauche : 190 px ;

Comment implémenter deux colonnes

S'il s'agit d'une mise en page à deux colonnes avec une barre latérale à gauche, supprimez la colonne de droite et ne définissez pas la valeur de marge droite de main-wrap. Les autres opérations sont les mêmes. vice versa.

Ce qui suit est le code de mise en page flexible pour les cinq mises en page :

Document DOM :

Liste CSS

Comparé à plusieurs schémas de mise en page traditionnels mentionnés précédemment, le code de mise en page flexible est extrêmement concis et très polyvalent, utilisant de simples trois lignes de CSS. cinq mises en page communes sont mises en œuvre.

Résumé

La méthode de mise en page traditionnelle est basée sur le modèle de boîte et s'appuie sur l'attribut display + l'attribut position + l'attribut float La logique. est relativement complexe, et à mettre en œuvre Certains effets spéciaux, comme le centrage vertical, sont particulièrement complexes et fastidieux. Le conteneur flexible dans la disposition flexible peut ajuster dynamiquement le rapport hauteur/largeur et l'ordre des sous-éléments en fonction de l'espace disponible réel, de sorte que les éléments puissent utiliser l'espace disponible autant que possible, tout en le rétrécissant pour éviter de le dépasser. La mise en page Flex fournit une solution de mise en page simple, complète et réactive.