Maison > interface Web > tutoriel CSS > Exemple de code pour le sélecteur de frères et sœurs pour implémenter les marges verticales

Exemple de code pour le sélecteur de frères et sœurs pour implémenter les marges verticales

零下一度
Libérer: 2017-05-11 11:30:25
original
1689 Les gens l'ont consulté

Comment le sélecteur de frères et sœurs peut garder CSS lisible tout en répondant à des exigences de conception complexes

C'est l'un des exemples du processus de développement frontal Web qui commence simple et devient progressivement plus compliqué : la conversion d'un article Des marges verticales (margesverticales) doivent être appliquées à tous les éléments, tels que les articles de blog compilés à partir de démarques complexes.

Dans la plupart des cas, vous devez faire face à de nombreuses exceptions et corrélations, telles que : les titres et les images ont généralement besoin de plus d'espace blanc au-dessus et en dessous, mais si deux images sont à côté l'une l'autre, alors les deux images L'espace blanc changera moins. La distance directe entre la balise h2 et la balise h3 est inférieure à la distance entre les deux balises h2.

Lorsque l'auteur original a commencé à travailler sur le front-end il y a quelques années, toutes ces exceptions et dépendances entraînaient toujours un code complexe, des incohérences visuelles et un comportement inattendu. J'ai cherché plusieurs fois sur Google pourquoi margin-top ne fonctionnait pas.

La première étape

Le code HTML simple est le suivant :

<article class="article">
  <h1>Hello World</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <p>Lorem ipsum dolor sit amet</p>
  <img src="…" alt="…">
  <p>Lorem ipsum dolor sit amet</p>
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
  </ul>
Copier après la connexion

Supprimez généralement deux paragraphes pour ajuster la marge verticale entre eux, après avoir obtenu l'effet souhaité, utilisez cette valeur comme marge de base de tous les éléments.

.article > * + * { 
    margin-top: 1.5rem;
}
Copier après la connexion

Le code CSS ci-dessus ajoute margin-top à tous les éléments enfants de .article qui ont des éléments frères adjacents. Seul l'ajout de l'attribut margin-top aux éléments directs évite les effets indésirables. Par exemple, dans le code HTML ci-dessus, margin-top sera ajouté à ul au lieu de li.

使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计0

La deuxième étape

Dans cette étape, des règles CSS plus spécifiques seront ajoutées, telles que :

.article > img + * { 
    margin-top: 3rem;
}
Copier après la connexion

après img Tout élément recevra une marge supérieure spécifique, l'effet est similaire à l'application de margin-bottom directement à l'img. Mais utiliser des sélecteurs frères et sœurs adjacents et margin-top présente deux avantages :

 1. Ne pas avoir à supprimer margin-bottom

du dernier processus enfant 2. Et éviter de s'effondrer margins.

使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计1

Étape 3

Dans cette étape, ajoutez la règle à un élément spécifique, par exemple :

.article > * + h2 { 
    margin-top: 4rem;
}
.article > * + img { 
    margin-top: 3rem;
}
Copier après la connexion

h2. et les img qui ont des frères et sœurs adjacents recevront une marge supérieure spécifique.

使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计2

Étape 4

Dans cette dernière étape, gérez les styles avec une corrélation particulière

.article > img + img { 
    margin-top: 1rem; 
}
Copier après la connexion

Changez l'espace entre les images adjacentes. distance

使用CSS兄弟选择器完成复杂垂直边距(vertical margins)的设计3

Si nécessaire, vous pouvez également ajouter un sélecteur css précis, tel que :

.article > img + img + img + h2 { 
    margin-top: 5rem;
}
Copier après la connexion

Si un h2 est disposé en Après trois images consécutives, il recevra une marge supérieure spécifique. Heureusement, il ne s'agit que d'un cas particulier, mais il est bon de savoir que des sélecteurs frères et sœurs adjacents peuvent résoudre ce problème de dépendance complexe.

Utilisation avancée

Pour améliorer la lisibilité, utilisez l'imbrication (SCSS) et écrivez chaque règle sur une seule ligne. Il n'est pas nécessaire de regrouper les sélecteurs avec la même valeur car CSSO gérera cela plus tard dans la tâche de construction.

.article {
    > * + * { margin-top: 1.5rem }
    > h2 + * { margin-top: 1rem }
    > img + * { margin-top: 3rem }
    > * + h2 { margin-top: 4rem }
    > * + h3 { margin-top: 3.5rem }
    > * + img { margin-top: 3rem }
    > img + img { margin-top: 1rem }
    > h2 + h3 { margin-top: 4.5rem }
}
Copier après la connexion

Cette technique fonctionne également avec SASS ou CSS, comme la grille de base. Si toutes les marges sont calculées à l'aide d'une margevariable spécifiée, il vous suffit de modifier la variable pour augmenter ou diminuer la marge globale.

Conclusion

Généralement lors du développement d'un site Web, vous rencontrerez des articles très complexes, qui incluent généralement des éléments tels que des titres de catégories, Introduction, texte ou des mises en page imbriquées. L'utilisation de sélecteurs frères adjacents et d'une marge supérieure unique peut résoudre des exigences de conception complexes tout en gardant CSS compréhensible, facilitant ainsi l'ajout ou l'ajustement de règles ultérieurement.

[Recommandations associées]

1. Tutoriel vidéo CSS en ligne gratuit

2. Manuel CSS en ligne

3. php.cn Dugu Jiujian (2) - tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal