Comment utiliser la méthode calc() de CSS3

Cette fois, je vais vous montrer comment utiliser la méthode calc() de CSS3. Quelles sont les précautions lors de l'utilisation de la méthode calc() de CSS3. cas pratique, jetons un coup d'oeil ensemble.

Le code suivant vous présente la méthode calc() en CSS3. Le contenu spécifique est le suivant :

<p style="width:100px; height:50px; background:red;">
  <p style="width:100%; height:20px; margin:5px; background:green;"></p>
</p>

[Ctrl+A Tous les conseils de sélection : Vous pouvez modifier une partie du. code d'abord, appuyez à nouveau sur Exécuter]

Comme le montre le code ci-dessus, l'aperçu montre que la zone rouge est dépassée, car dans le CSS standard, la largeur n'inclut pas la marge (la largeur dans l'ancien IE inclut la marge).

Afin d'obtenir l'effet ci-dessus, nous mettons généralement une autre couche de p au milieu (certains disent, ne pouvons-nous pas simplement supprimer la largeur : 100 % ? Rassurez-vous, nous donnons un exemple. Dans en fait, dans certains cas, cela ne peut pas être Annuler la largeur : 100 % )

Y a-t-il quelque chose de plus pratique ? Utilisez plutôt calc().

<p style="width:100px; height:50px; background:red;">
  <p style="width:calc(100% - 10px); height:20px; margin:5px; background:green;"></p>
</p>

[Ctrl+A Tous les conseils de sélection : Vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

Mode d'emploi

• Supports : +, -, *, /, supports usage mixte

• Supports : %, px, em, rem, etc.

• Il doit y avoir des espaces avant et après +, -, par exemple : calc(100%-10px) est incorrect et doit être remplacé par : calc(100% - 10px)

• *, / avant et après Vous n'avez pas besoin d'espaces, mais ils sont recommandés.

Support

Tous les principaux navigateurs de bureau le prennent en charge. On dit que les navigateurs mobiles ne le supportent guère.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Comment utiliser le redessin et la redistribution

Comment utiliser les paramètres CSS pour enregistrer les mots de passe des utilisateurs

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!