Explication détaillée de l'utilisation de calc() en CSS3

Cet article présente principalement la méthode calc() de CSS 3 en détail. Elle est très bonne et a une valeur de référence. Les amis qui en ont besoin peuvent s'y référer.

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 Select. Astuce : Vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

Comme le montre le code ci-dessus, l'aperçu montre que la case rouge est dépassée, car en 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]

Instructions pour utilisation

• 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 )

• *, / Il n'y a pas besoin d'espaces avant et après, mais c'est recommandé.
  

Supportabilité

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

Recommandations associées :

Introduction détaillée à la nouvelle propriété calc() en CSS3

Réponse à calc() dans CSS3 Introduction aux méthodes de mise en page des modèles

Instructions sur l'utilisation de l'attribut calc() en CSS3 pour exprimer les valeurs de taille à l'aide de calculs

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!