À propos de la méthode calc() en CSS3

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

Le code suivant introduit calc() dans CSS3. vous. Méthode, 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 d'abord modifier une partie du code, et puis appuyez 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 Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

Description d'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.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Implémentation de l'animation @keyframes en CSS3

A propos de la méthode d'affichage centré responsive de la bannière CSS image

Utilisation de l'attribut CSS table-layout

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!