Une explication détaillée des fonctionnalités avancées telles que la priorité et le contexte d'empilement en CSS vous donnera une compréhension plus approfondie du CSS ! !

Habituellement, lorsque nous apprenons CSS, nous pensons que la syntaxe est facile à maîtriser, mais dans l'application réelle, nous rencontrons divers « fosses » difficiles à combler. éviter que tout le monde ne soit affecté par Avec la même confusion et la même confusion, cet article explique en détail les fonctionnalités avancées telles que la priorité et le contexte d'empilage en CSS. Vous donne une compréhension plus approfondie du CSS.

Priorité CSS

La priorité est déterminée par le navigateur et appliquée à l'élément en jugeant quelles valeurs d'attribut sont les plus pertinentes pour l'élément. La priorité est déterminée uniquement par les règles de correspondance composées de sélecteurs. Si vous ajoutez une classe (Class) à une balise P, certains attributs de la classe ne changeront pas après l'exécution et il y aura un problème de priorité avec le sélecteur CSS.

Priorité du sélecteur

Types de sélecteur courants :

• Style en ligne, tel que ...;
• Sélecteurs d'ID, tels que #id;
• Sélecteur de classe (Class), tel que .class {...} , [href=''], :hover;
• sélecteur de balise (Tag), tel que p,:before

Le poids de chaque type de sélecteur est différent. de chaque sélecteur est déterminé par le poids

• Style en ligne : 1,0,0,0
• Sélecteur d'identification : 1,0,0
• Sélecteur de classe. : 1,0
• Sélecteur de balises : 1

Ordre de priorité des sources, comme indiqué sur la figure

Le système de style commence du sélecteur le plus à droite vers la gauche pour correspondre aux règles. Tant qu'il y a d'autres sélecteurs à gauche du sélecteur actuel, le système de style continuera à se déplacer vers la gauche jusqu'à ce qu'il trouve un élément qui correspond à la règle, ou qu'il se ferme en raison d'une incompatibilité.

CSS Règle de priorité :

1. Les sélecteurs ont un poids, plus le poids est grand, la priorité
2. Lorsque les poids sont égaux, les paramètres de la feuille de style qui apparaissent plus tard sont meilleurs que les paramètres de la feuille de style qui apparaissent en premier
3. Les règles du créateur sont supérieures à celles du spectateur : c'est-à-dire le jeu de styles CSS ; par l'auteur de la page Web a une priorité supérieure au style défini par le navigateur ;
4. Le style CSS hérité n'est pas aussi bon que le style CSS spécifié plus tard
5. Règles marquées par "!important" ; ont la priorité la plus élevée dans le même ensemble de paramètres de propriété ;

Modèles CSS courants

Le modèle Box est un modèle de pensée utilisé dans la technologie CSS qui est souvent utilisé dans la conception Web.

Attributs CSS liés au modèle de boîte, contenu de l'élément (contenu de l'élément), largeur et hauteur (Largeur/Hauteur), remplissage (padding), bordure (bordure) et marges .

En CSS, la largeur et la hauteur font référence à la largeur et à la hauteur de la zone de contenu (élément). L'augmentation du remplissage, des bordures et des marges n'affectera pas la taille de la zone de contenu, mais augmentera la taille globale de la boîte de l'élément. Supposons que la boîte ait 10 pixels de marge et 5 pixels de remplissage de chaque côté. Si vous souhaitez que la zone d'élément mesure 100 pixels, vous devez définir la largeur du contenu sur 70 pixels. Les attributs requis sont les suivants :

Attributs de base

• Largeur/Hauteur
• Padding
• Marge
• Boder
• Outline
• Attribut de décalage
  • Haut/Gauche/Bas/Droite
• La différence entre .NET WinForm et .NET WinForm :
  • Par défaut, la largeur/hauteur n'inclut pas le remplissage
  • L'ordre des quatre valeurs de la propriété Margin/Padding est en haut à droite en bas à gauche (dans le sens des aiguilles d'une montre)

Tout peut être traité comme un modèle de boîte

Fusion de marge verticale

Si

 ? Le bon sens devrait être 12 + 12 = 24 px, mais la réponse est toujours 12 px. Les marges verticales se chevauchant, les plus grandes seront couvertes.

L'attribut Position précise le type de positionnement de l'élément. Cet attribut définit le mécanisme de positionnement utilisé pour établir la disposition de l'élément. N'importe quel élément peut être positionné, mais les éléments absolus ou fixes génèrent une boîte au niveau du bloc, quel que soit le type de l'élément lui-même. Un élément positionné relativement est décalé par rapport à sa position par défaut dans un écoulement normal. Voici la plage de valeurs de l'attribut Position :

• Disposition du flux normal statique (Débit normal), la valeur par défaut. Sans positionnement, l'élément apparaît dans un flux normal (en ignorant les déclarations haut, bas, gauche, droite ou z-index).
• Relative prend en charge la disposition de flux ordinaire avec des attributs de décalage, générant des éléments relativement positionnés par rapport à leur position normale. Par conséquent, "left:20" ajoute 20 pixels à la position GAUCHE de l'élément.
• Absolu Une mise en page qui est positionnée de manière absolue dans un élément conteneur, générant un élément en position absolue qui est positionné par rapport au premier élément parent autre qu'un positionnement statique. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".
• Fixe Mise en page absolument positionnée dans la plage d'affichage, génère des éléments positionnés absolument, positionnés par rapport à la fenêtre du navigateur. La position de l'élément est spécifiée via les attributs "left", "top", "right" et "bottom".

Attribut Float

L'attribut float définit dans quelle direction l'élément flotte. Historiquement, cette propriété a toujours été appliquée aux images, provoquant l'enroulement du texte autour de l'image, mais en CSS, n'importe quel élément peut flotter. Un élément flottant crée une boîte au niveau du bloc, quel que soit le type d'élément dont il s'agit.

Contexte d'empilage

Une structure qui fournit les caractéristiques de l'espace de pile z-index et affecte l'ordre de rendu des sous-éléments est appelée contexte d'empilement.

Le navigateur attribuera un contexte Stacking aux éléments DOM qui répondent aux règles suivantes.

• élément racine (html)
• Élément "Positionné" (position : absolue ou relative) et la valeur z-index spécifiée n'est pas auto
• élément flexible Et spécifier les éléments avec une valeur d'index z autre que auto
• Éléments avec une opacité inférieure à 1
• Spécifier les éléments avec une valeur de transformation autre qu'aucune
• Spécifier une valeur de mode de mélange autre que les éléments normaux
• Éléments qui spécifient une valeur de filtre autre qu'aucune
• Éléments qui spécifient une valeur d'isolement d'isolat
• Éléments qui spécifient une valeur de n'importe quel attribut dans la liste ci-dessus sur l'attribut will-change
• Spécifiez l'élément -webkit-overflow-scrolling avec la valeur tactile

z-index

Ordre d'empilement

• Selon la structure arborescente DOM, les éléments avec un contexte d'empilement formeront une structure arborescente.
• Les éléments dans un contexte d'empilement seront empilés dans l'ordre en fonction du z-index. Celui avec le z-index le plus grand vient en premier
• Parmi les éléments z-index de niveau 0, l'ordre d'empilement des éléments avec le contexte d'empilement vient en premier

• Lorsque les conditions ci-dessus ne peuvent pas être distingué, utilisez celui de l'arborescence DOM. L'ordre de détermine l'ordre de superposition.

Performances

Pipeline de rendu de pixels

L'amélioration des performances nécessite chaque Un élément du pipeline de construction nécessite une attention particulière :

• Style
  • Réduire la complexité du sélecteur de style
  • Réduire le nombre d'éléments nécessaires pour effectuer le calcul de style
• Mise en page
  • Évitez de déclencher la mise en page autant que possible
    • Presque toute la mise en page se produit dans la portée de l'ensemble du document.
    • Utilisez flexbox pour remplacer l'ancien modèle de mise en page
    • Évitez la synchronisation forcée des événements de mise en page
    • Évitez la mise en page continue rapide

• Peindre
  • La modification de toute propriété à l'exception de la transformation et de l'opacité déclenchera la peinture
  • Augmentez la couche de peinture des éléments en mouvement ou en dégradé
  • Réduisez la zone de dessin
  • Simplifier la complexité du dessin

Performances du sélecteur CSS

• L'extrémité la plus à droite d'un sélecteur est La condition clé de ce sélecteur (Key Selector)
• Les navigateurs font correspondre les sélecteurs de droite à gauche, donc des conditions plus spécifiques doivent être placées autant que possible à l'extrémité droite.
• Évitez d'utiliser les règles *
• Les sélecteurs doivent être aussi courts que possible
• N'ajoutez pas de qualificatifs avant les sélecteurs d'ID
• Il n'est pas nécessaire d'utiliser des sélecteurs de balises pour qualifier le sélecteur de classe

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

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!