Décodage du positionnement CSS: une classe de maître avec Paul o & # x27; Brien

CSS Positionnement: la clé de la disposition du Web

Le positionnement CSS est un concept de base du développement Web, qui donne aux développeurs la possibilité de contrôler comment les éléments HTML sont affichés sur les pages Web. La compréhension du positionnement du CSS est essentielle pour créer des conceptions Web réactives et engageantes visuellement.

Paul O’Brien, expert de CSS, a souligné qu'il existe généralement plusieurs façons de mettre en œuvre les dispositions CSS, et la meilleure solution dépend souvent des exigences ultérieures. Le défi pour les débutants est de savoir comment choisir la bonne méthode qui convient à la tâche actuelle.

Dans le forum DCODE, Paul O’Brien a exploré le positionnement du CSS en profondeur et a répondu à diverses questions couvrant des sujets tels que les flottants, le positionnement relatif, le positionnement absolu, le positionnement fixe, l’affichage de la table et le flexion. Le forum permet des discussions plus approfondies et plus larges et est ouvert à tous ceux qui souhaitent participer à la discussion.

Le positionnement des éléments Web est parfois insaisissable, en particulier face à de nombreuses méthodes disponibles. Avec l'introduction de technologies telles que les dispositions Flexbox et Grid et les transformations CSS3, les options sont toujours en pleine expansion, qui peuvent également être utilisées pour implémenter des techniques de mise en page incroyables.

Dans ce forum DCODE, l'expert du CSS, Paul O’Brien, répond à toutes les questions sur le positionnement CSS - du positionnement flottant, relatif, absolu et fixe aux écrans de table, et même Flexbox.

Si vous avez des questions sur le positionnement du CSS, veuillez vous joindre à la discussion!

sur les dcodes

Notre forum DCODE est un thème vedette qui invite les clients à plonger dans des domaines spécifiques. Contrairement à la session de questions / réponses qui ne dure qu'une heure, le sujet DCODE est ouvert pendant longtemps pour discuter des problèmes plus profondément et largement. Vous pouvez poser des questions ou les suivre à tout moment, car les invités répondent aux questions et publient du contenu d'intérêt.

sur Paul

Paul O’Brien est un expert bien connu dans le domaine CSS. Il est le co-auteur du livre Landmark The Ultimate CSS Reference et a été un feu directeur pour de nombreux développeurs qui ont perdu leur chemin dans la complexité du CSS depuis de nombreuses années.

Avez-vous entendu parler d'utiliser

ou de méthodes similaires pour inclure des éléments flottants? C'est Paul qui a découvert cette technologie à l'époque. overflow: hidden

Si CSS peut obtenir un certain effet, Paul sait comment le faire. Il souligne même comment accomplir ce que les gens pensent impossible.

Lanceur de thème de Paul

Pour commencer la discussion, Paul a créé une simple démo qui place simplement une largeur fixe de 50px et une boîte rouge hauteur à droite de la page. Le code HTML est le suivant:

<div class="wrap">
  <div class="box">Box</div>
</div>

Veuillez prendre le temps de réfléchir à combien de façons vous pouvez utiliser pour réaliser cet effet?

Vous pouvez immédiatement penser à environ trois façons, mais au fur et à mesure que vous approfondissez les détails, vous constaterez qu'il existe en fait de nombreuses façons de le faire, et dans ma démo, je me suis arrêté à 15 ans, mais je ne suis pas surpris de Voir certaines méthodes que je ne m'attendais pas à apparaître!

C'est ma démo pour voir si vous pouvez trouver d'autres façons de le faire:

lien de démonstration de codepen

L'objectif de l'exercice est simplement d'indiquer que dans le CSS, il existe souvent de nombreuses façons de mettre en œuvre les dispositions, et la meilleure solution dépend souvent des exigences ultérieures. Je dis souvent que «la beauté du CSS est qu'il existe de nombreuses façons de faire la même chose», mais la difficulté pour les débutants est de savoir quelle méthode convient à la tâche actuelle.

Maintenant que vous avez vérifié la démo (soyez honnête), combien de personnes ont pensé ou compris la première méthode de la démo?

C'est la méthode la plus simple et la plus fondamentale, et probablement l'une des premières leçons que la plupart des gens oublient après avoir appris, et je suppose que peu d'entre vous y penseront.

<div class="wrap">
  <div class="box">Box</div>
</div>

Cela semble simple, mais comment place-t-il la boîte sur le côté droit de la page?

Nous connaissons tous margin: 0 auto, qui peut centrer horizontalement les éléments au niveau des blocs, mais margin: 0 0 0 auto; comment déplacer la boîte vers la droite?

Pour répondre à cette question, vous devez vous référer à la spécification, mais un exemple simplifié est la marge de marge de largeur = largeur contenant le bloc.

Par conséquent, pour un élément avec une largeur fixe, si sa marge droite est nulle, la marge gauche doit être égale à la distance au bord gauche du bloc contenant. Ceci est réalisé via margin-left: auto.

Si vous définissez margin-left: 0 à la place, la boîte se déplacera vers la gauche, et dans une langue de gauche à droite, margin-right: 0 sera égal à auto (même si vous le spécifiez comme zéro), de sorte que le Le modèle de boîte est l'exigence peut être établi.

Enfin, si vous définissez les deux margin-left et margin-right à auto, la boîte sera centrée, comme nous le savons et aimons.

(J'ai simplifié la réponse, alors lisez la spécification pour les détails et la compréhension.)

J'ai mentionné cette technique de marge automatique car c'est une technique courante lors de l'utilisation de Flexbox. Soit dit en passant, il est peu connu que le margin: auto sur l'élément de positionnement absolu centrera l'élément horizontalement et verticalement dans un conteneur de hauteur et de largeur fixe.

C'est une question de marges, consultez le reste des exemples dans la première démo, n'hésitez pas à publier ou à discuter si vous pouvez penser à plus de moyens d'y parvenir.

Si vous ne comprenez aucun exemple, veuillez discuter et nous pouvons clarifier.

Veuillez noter que ce sujet ne concerne pas seulement ce premier article, c'est principalement un point de conversation pour continuer les choses, et si vous avez un sujet que vous espérez discuter, veuillez continuer.

J'ai hâte de répondre ou d'être perplexe par votre question. Je ne peux pas garantir que toutes les réponses seront connues, mais je crois que si je ne connais pas les réponses, les autres auront une bonne idée et seront impliquées dans la conversation.

Suivez cette discussion plus loin dans le forum de point de point.

FAQ sur le positionnement CSS

Quelle est la signification du positionnement du CSS dans le développement Web?

Le positionnement CSS est un concept de base du développement Web. Il permet aux développeurs de contrôler comment les éléments HTML apparaissent sur les pages Web. Avec le positionnement de CSS, vous pouvez placer des éléments n'importe où sur la page, contrôler la disposition de plusieurs éléments et même chevaucher des éléments au besoin. La compréhension du positionnement du CSS est essentielle pour créer des conceptions Web réactives et engageantes visuellement.

Comment fonctionne la valeur "statique" dans le positionnement CSS?

La valeur "statique" est la valeur par défaut de l'attribut position dans CSS. Lorsqu'un élément est réglé sur "statique", sa position est déterminée en fonction du flux normal du document. Cela signifie que les éléments seront affichés dans l'ordre dans lequel ils apparaissent dans HTML et ne seront pas affectés par les attributs top, bottom, left ou right.

Pouvez-vous expliquer la valeur "relative" dans le positionnement CSS?

Lorsqu'un élément est réglé sur une position "relative", sa position par rapport à sa position normale. Cela signifie que vous pouvez déplacer un élément de sa position dans le flux de document normal sans affecter la position des autres éléments. Les attributs "supérieur", "inférieur", "gauche" et "droite" détermineront la position finale de l'élément.

Que signifie le positionnement "absolu" dans CSS?

Le positionnement "absolu" dans CSS vous permet de localiser les éléments par rapport à son élément d'ancêtre positionné le plus proche ou par rapport au bloc d'inclusion initial s'il n'y a pas d'élément d'ancêtre positionné. Cet élément est supprimé du flux de document normal et aucun espace n'est créé pour l'élément de la disposition de la page.

Comment est la différence entre le positionnement "fixe" et le positionnement "absolu"?

Bien que le positionnement "absolu" positionne l'élément par rapport à son élément d'ancêtre positionné le plus proche, le positionnement "fixe" positionnant l'élément par rapport à la fenêtre du navigateur. Cela signifie que même si vous faites défiler la page, les éléments avec le positionnement "fixe" restent au même endroit.

Quel est le positionnement "collant" dans CSS?

Le positionnement "collant" est un mélange de positionnement relatif et de positionnement fixe. Les éléments avec positionnement "collant" sont considérés comme "relatifs" avant de dépasser le seuil spécifié et sont considérés comme "fixes" après avoir dépassé le seuil. Ceci est très utile pour les éléments qui devraient être collés en haut de la fenêtre lorsque vous faites défiler vers le bas.

Comment localiser les éléments qui se chevauchent à l'aide de CSS?

Vous pouvez utiliser l'attribut "Z-Index" dans le positionnement CSS pour chevaucher les éléments. L'attribut "z-index" spécifie l'ordre d'empilement des éléments, plus la valeur est élevée, plus elles sont étrangères du spectateur. En donnant à un élément un «indice z plus élevé que l'autre, vous pouvez le faire apparaître au-dessus d'un autre élément.

Comment le ciblage CSS affecte-t-il la réactivité d'un site Web?

CSS Le positionnement joue un rôle crucial dans la renforce du site Web. En contrôlant l'emplacement des éléments sur la page, vous pouvez vous assurer que votre site Web a l'air bien sur toutes les tailles d'écran. Par exemple, vous pouvez utiliser des requêtes multimédias pour modifier la position d'un élément basé sur la taille de la fenêtre.

Puis-je utiliser le positionnement CSS pour centrer les éléments?

Oui, vous pouvez utiliser le positionnement CSS pour centrer des éléments. Une approche commune consiste à utiliser "Absolute" pour localiser et définir les propriétés top et left à 50%, puis d'utiliser les propriétés transform pour déplacer l'élément en arrière de la moitié de sa largeur et de sa hauteur.

Quels pièges courants doivent être évités lors de l'utilisation du positionnement CSS?

Un piège commun est que l'oubli du positionnement "absolu" et "fixe" supprimera les éléments des flux de documents normaux, ce qui peut faire bouger d'autres éléments de manière inattendue. Un autre écueil est que vous ne testez pas votre site Web sur plusieurs tailles d'écran, car le positionnement qui a l'air bien sur une taille d'écran peut ne pas fonctionner sur une autre taille d'écran.

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!