valeur CSS

La source des valeurs CSS

Tout d'abord, nous savons que bien que CSS ait une syntaxe simple, il n'est pas écrit aveuglément. Ses propriétés et valeurs sont officiellement définies, pour être précis, elles sont définies. par les fabricants de navigateurs.

Ces valeurs données proviennent des situations suivantes :

1. hériter signifie hériter de la valeur de l'élément ancêtre. Chaque attribut l'a.

2. initial représente la valeur par défaut de l'agent utilisateur. Chaque attribut l'a.

3. Valeurs spécifiques au navigateur, généralement préfixées par -ms-, -webkit-, etc., et certaines valeurs n'ont pas de préfixe.

4. Valeurs partagées par les navigateurs Bien qu'elles soient partagées, la mise en œuvre de chaque navigateur n'est pas forcément la même.

Il est donc certain que les problèmes de compatibilité CSS sont principalement causés par l'incohérence et l'évolution du rendu CSS mis en œuvre par les fabricants de navigateurs.

La valeur dans la spécification CSS

La valeur finalement présentée à l'utilisateur passe par 4 étapes : d'abord la valeur spécifiée (la "valeur spécifiée"), puis la valeur héritée (la " valeur calculée"), puis convertie en valeur utilisée (la "valeur utilisée"), et enfin la valeur réelle (la "valeur réelle") obtenue en raison des limitations du navigateur lui-même.

est 指定值-->计算值-->使用值-->实际值

Valeur spécifiée

Il existe trois possibilités pour spécifier la valeur L'une est la valeur par défaut de l'agent utilisateur, qui est initiale, l'autre est la valeur écrite par l'artiste dans le programme. , et l'autre est la valeur qui affiche l'héritage spécifié, qui est héritage

Normalement, ni l'héritage ni l'initiale n'ont besoin d'être spécifiés explicitement. Mais dans certains cas ces 2 valeurs sont très utiles.

valeur calculée

Il s'agit de la valeur calculée par le moteur de rendu en analysant le fichier CSS et la relation d'héritage des règles en cascade avant la formation du document.

valeur utilisée

Il s'agit de la valeur obtenue après que le CSS soit combiné avec le HTML pour former un document.

Comprenez que la différence entre les valeurs calculées et les valeurs utilisées est que le navigateur analyse d'abord les fichiers HTML et CSS séparément, puis les fusionne. Veuillez vous référer à ces 2 photos pour plus de détails.

processus de rendu du webkit

processus de rendu Geoko

valeur réelle

est le dernier navigateur disponible pour Par exemple, tous les navigateurs ne peuvent pas gérer 7 décimales, la précision sera donc réduite.

Ces 4 valeurs​​sont dérivées de la spécification. D'autres implémentations de navigateurs peuvent ne pas fonctionner selon ce processus en 4 étapes, mais actuellement les navigateurs grand public suivent ce processus

Remarque. que la cascade est différente En héritage. La cascade concerne les propriétés CSS individuelles, l'héritage concerne les éléments. La superposition s’accompagne souvent de problèmes de pondération.

Développeur Chrome

1. Spécifier une valeur (3 types)

2. Valeur par défaut de l'agent utilisateur (ne peut pas être modifiée)

3. La valeur avec un trait de soulignement indique qu'elle est remplacée par la règle en cascade, c'est-à-dire que le style est remplacé par la règle pondérée.

4. Cliquez sur 4 pour accéder au nœud et à la vue de style correspondants. La partie sous 4 indique de quel élément le style est hérité. Habituellement, vous pouvez voir la chaîne DOM ancêtre de l'élément à partir d'ici ·

5. La partie grise peut être modifiée<.>, Indique que la règle n'est pas disponible et est évaluée au moment de l'exécution.

Exemple :

Je précise maintenant la hauteur de h1 comme suit

Regardez la valeur calculée et vous pouvez voir que chrome la conserve 4 chiffres après la virgule décimale :

Voir la valeur utilisée (la raison de regarder dans cette case est que la case représente la formation du document, qui correspond à la valeur utilisée précédente)

La valeur réelle finale est ici (consultez-la directement sur la page) :

Vous pouvez voir que s'il y a un remplissage, le remplissage formera le document. Ajoutez-le ensuite à la largeur et à la hauteur visuelles lorsqu'il est affiché sur le navigateur. Bien sûr, c'est différent si l'attribut box-sizing est spécifié, mais vous pouvez savoir que cela se produit à la dernière étape.

La source des valeurs CSS

Tout d'abord, nous savons que bien que CSS ait une syntaxe simple, ses attributs ne sont pas écrits aveuglément. et les valeurs sont C'est officiellement défini, pour être précis, c'est défini par le fabricant du navigateur.

Ces valeurs données proviennent des situations suivantes :

1. hériter signifie hériter de la valeur de l'élément ancêtre. Chaque attribut l'a.

2. initial représente la valeur par défaut de l'agent utilisateur. Chaque attribut l'a.

3. Valeurs spécifiques au navigateur, généralement préfixées par -ms-, -webkit-, etc., et certaines valeurs n'ont pas de préfixe.

4. Valeurs partagées par les navigateurs Bien qu'elles soient partagées, la mise en œuvre de chaque navigateur n'est pas forcément la même.

Il est donc certain que les problèmes de compatibilité CSS sont principalement causés par l'incohérence et l'évolution du rendu CSS mis en œuvre par les fabricants de navigateurs.

La valeur dans la spécification CSS

La valeur finalement présentée à l'utilisateur passe par 4 étapes : d'abord la valeur spécifiée (la "valeur spécifiée"), puis la valeur héritée (la " valeur calculée"), puis convertie en valeur utilisée (la "valeur utilisée"), et enfin la valeur réelle (la "valeur réelle") obtenue en raison des limitations du navigateur lui-même.

est 指定值-->计算值-->使用值-->实际值

Valeur spécifiée

Il existe trois possibilités pour spécifier la valeur L'une est la valeur par défaut de l'agent utilisateur, qui est initiale, l'autre est la valeur écrite par l'artiste dans le programme. , et l'autre est la valeur qui affiche l'héritage spécifié, qui est héritage

Normalement, ni l'héritage ni l'initiale n'ont besoin d'être spécifiés explicitement. Mais dans certains cas ces 2 valeurs sont très utiles.

valeur calculée

Il s'agit de la valeur calculée par le moteur de rendu en analysant le fichier CSS et la relation d'héritage des règles en cascade avant la formation du document.

valeur utilisée

Il s'agit de la valeur obtenue après que le CSS soit combiné avec le HTML pour former un document.

Comprenez que la différence entre les valeurs calculées et les valeurs utilisées est que le navigateur analyse d'abord les fichiers HTML et CSS séparément, puis les fusionne. Veuillez vous référer à ces 2 photos pour plus de détails.

processus de rendu du webkit

processus de rendu Geoko

valeur réelle

est le dernier navigateur disponible pour Par exemple, tous les navigateurs ne peuvent pas gérer 7 décimales, la précision sera donc réduite.

Ces 4 valeurs​​sont dérivées de la spécification. D'autres implémentations de navigateurs peuvent ne pas fonctionner selon ce processus en 4 étapes, mais actuellement les navigateurs grand public suivent ce processus

Remarque. que la cascade est différente En héritage. La cascade concerne les propriétés CSS individuelles, l'héritage concerne les éléments. La superposition s’accompagne souvent de problèmes de pondération.

Développeur Chrome

1. Spécifier une valeur (3 types)

2. Valeur par défaut de l'agent utilisateur (ne peut pas être modifiée)

3. La valeur avec un trait de soulignement indique qu'elle est remplacée par la règle en cascade, c'est-à-dire que le style est remplacé par la règle pondérée.

4. Cliquez sur 4 pour accéder au nœud et à la vue de style correspondants. La partie sous 4 indique de quel élément le style est hérité. Habituellement, vous pouvez voir la chaîne DOM ancêtre de l'élément à partir d'ici ·

5. La partie grise peut être modifiée<.>, Indique que la règle n'est pas disponible et est évaluée au moment de l'exécution.

Exemple :

Je précise maintenant la hauteur de h1 comme suit

Regardez la valeur calculée et vous pouvez voir que chrome la conserve 4 chiffres après la virgule décimale :

Voir la valeur utilisée (la raison de regarder dans cette case est que la case représente la formation du document, qui correspond à la valeur utilisée précédente)

La valeur réelle finale est ici (consultez-la directement sur la page) :

Vous pouvez voir que s'il y a un remplissage, le remplissage formera le document. Ajoutez-le ensuite à la largeur et à la hauteur visuelles lorsqu'il est affiché sur le navigateur. Bien sûr, c'est différent si l'attribut box-sizing est spécifié, mais vous pouvez savoir que cela se produit à la dernière étape.

Pour plus d'articles sur la valeur CSS, veuillez faire attention au site Web PHP chinois !