Qu'est-ce que calc() en CSS3 ? Comment utiliser calc() ?

Beaucoup de gens ne savent pas ce qu'est calc(), alors apprenons calc() aujourd'hui. Avant d'apprendre, nous devons savoir Qu'est-ce que calc() ? Seulement si tu sais ce qu'il est ? Ce n'est que dans des applications pratiques que nous pouvons mieux l'utiliser. Ensuite, la prochaine étape concernera calc().

Qu'est-ce que calc() ?

calc() Littéralement, nous pouvons le comprendre comme une fonction fonction. En fait, calc est l'abréviation du mot anglais calculate. C'est une nouvelle fonction de CSS3 et est utilisée pour spécifier la longueur des éléments. Par exemple, vous pouvez utiliser calc() pour définir des valeurs dynamiques pour les propriétés border, margin, padding, font-size et width d'un élément. Pourquoi s’appelle-t-on une valeur dynamique ? Parce que nous utilisons des expressions pour obtenir la valeur. Cependant, le plus grand avantage de calc() est qu'il peut être utilisé dans une mise en page fluide. La largeur de l'élément peut être calculée via calc().

Que peut faire calc() ?

calc() vous permet de calculer l'élément. Vous pouvez donner un élément div et calculer sa largeur ou sa hauteur en utilisant des valeurs unitaires en pourcentage, em, px et rem, telles que "width: calc(50). % + 2em)", afin que vous n'ayez pas à prendre en compte la valeur de largeur de l'élément DIV, et laissez cette tâche ennuyeuse au navigateur pour le calculer.

Syntaxe calc()

La syntaxe calc() est très simple, tout comme quand nous étions enfants, nous avons appris l'addition (+), la soustraction (-), la multiplication (*) et la division (/), utilisent des expressions mathématiques pour représenter :

.elm {
  width: calc(expression);
}

où « expression » est une expression utilisée pour calculer la longueur.

Règles de fonctionnement de calc()

calc() utilise des règles de fonctionnement mathématiques générales, mais fournit également des fonctions plus intelligentes :
1. Utilisez "+", ". -", "*" et "/" quatre opérations arithmétiques ;
2. Vous pouvez utiliser le pourcentage, le px, l'em, le rem et d'autres unités ;
3. Vous pouvez mélanger différentes unités pour le calcul ;
4 . Lorsqu'il y a "+" et "-" dans l'expression, il doit y avoir des espaces avant et après eux. Par exemple, "widht: calc(12%+5em)" est une erreur d'écrire sans espaces
5. Expression Lorsqu'il y a "*" et "/" dans la formule, il ne peut y avoir d'espaces avant et après eux, mais il est recommandé de laisser des espaces.

Compatibilité des navigateurs

La compatibilité du navigateur avec calc() est plutôt bonne, et elle est meilleure dans IE9+, FF4.0+, Chrome19+ et Safari6+ Bon support, vous devez également ajouter devant celui-ci l'identifiant de chaque fabricant de navigateur, mais malheureusement, le navigateur mobile n'a pas encore de support « Firefox pour Android 14.0 », et le reste est effacé.

En utilisation réelle, vous devez également ajouter le préfixe du navigateur

 .elm {
    /*Firefox*/
    -moz-calc(expression);
    /*chrome safari*/
    -webkit-calc(expression);
    /*Standard */
    calc();
 }

.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

Il est à noter que dans la fonction calc, un espace doit être réservé de part et d'autre du opérateur , sinon la fonction signalera une erreur.

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!