A quoi sert CSS calc()

La fonction de css calc() est de calculer dynamiquement la valeur de longueur. Cette fonction nous permet d'effectuer des opérations mathématiques sur la valeur de l'attribut, en utilisant une syntaxe telle que ".foo { width: calc(100px + 50px) ;}", qui L'instruction indique que la valeur de pixel fixe spécifiant la largeur d'un élément est la somme de plusieurs valeurs.

Recommandé : "Tutoriel vidéo CSS"

La fonction calc() de CSS3 est utilisée pour calculer dynamiquement le valeur de longueur.

La fonction calc() nous permet d'effectuer des opérations mathématiques sur les valeurs d'attributs. Par exemple, nous pouvons utiliser calc() pour spécifier une valeur de pixel fixe pour la largeur d'un élément comme somme de plusieurs valeurs.

.foo {  width: calc(100px + 50px);
}

Remarque :

• Il est à noter qu'un espace doit être réservé avant et après l'opérateur, par exemple : width: calc(100% - 10px) ;

• Toute valeur de longueur peut être calculée à l'aide de la fonction calc()

• La fonction calc() prend en charge "+", "- ; ", "*" , "/" opération ;

• la fonction calc() utilise les règles de priorité des opérations mathématiques standard ;

Pourquoi est calc()

Si vous avez utilisé un préprocesseur CSS, tel que SASS, vous avez peut-être rencontré l'exemple ci-dessus

.foo {
    width: 100px + 50px;
}
$width-one: 100px;
$width-two: 50px;
.bar {
    width: $width-one + $width-two;
}

Cependant, la fonction calc() fournit une meilleure solution. Premièrement, nous sommes capables de combiner différentes unités. En particulier, nous pouvons mélanger des calculs avec des unités absolues (telles que les pourcentages et les unités de fenêtre) et des unités relatives (telles que les pixels). Par exemple, nous pouvons créer une expression qui soustrait une valeur de pixel à un pourcentage.

.foo {    width: calc(100% - 50px);
}

Dans cet exemple, l'élément .foo est toujours 50px plus petit que la largeur de son élément parent.

Deuxièmement, avec calc(), la valeur calculée est l'expression elle-même, pas le résultat de l'expression. Lorsque vous effectuez des opérations mathématiques à l'aide du préprocesseur CSS, la valeur donnée est le résultat de l'expression.

.foo {    width: 100px + 50px;
}.foo {    width: 150px;
}

Cependant, le navigateur analyse la valeur de calc() comme une véritable expression calc().

.foo {    width: calc(100% - 50px);
}.foo {    width: calc(100% - 50px);
}

Cela signifie que les valeurs dans le navigateur peuvent être plus flexibles et répondre aux changements dans la fenêtre d'affichage. Nous pouvons définir une hauteur pour l'élément qui est la hauteur de la fenêtre moins une valeur absolue, et elle s'ajustera à mesure que la fenêtre change.

Utiliser calc()

La fonction calc() peut être utilisée pour effectuer quatre opérations arithmétiques sur des attributs numériques. Par exemple, les types de données , , , ,

Voici quelques exemples :

.foo {    width: calc(50vmax + 3rem);    padding: calc(1vw + 1em);    transform: rotate( calc(1turn + 28deg) );    background: hsl(100, calc(3 * 20%), 40%);    font-size: calc(50vw / 3);
}

clac() Les fonctions

calc() imbriquées peuvent être imbriquées. À l’intérieur d’une fonction, elle est traitée comme une simple expression entre crochets, comme le montre l’exemple suivant. La valeur calculée de la fonction

.foo {    width: calc( 100% / calc(100px * 2) );
}

est la suivante :

.foo {    width: calc( 100% / (100px * 2) );
}

Schéma de rétrogradation

clac() a été généralement pris en charge.

Pour les navigateurs qui ne prennent pas en charge calc(), l'intégralité de l'expression de la valeur de l'attribut sera ignorée. Cependant, nous pouvons utiliser une valeur fixe comme solution de repli pour les navigateurs qui ne prennent pas en charge calc().

.foo {    width: 90%; 
    width: calc(100% - 50px);
}

vi design http://www.maiqicn.com Site Web complet de ressources de bureau https://www.wode007.com

Dans quels scénarios calc() peut-il être utilisé ? Si l'on connaît les dimensions de l'élément, une solution typique est d'utiliser des marges négatives pour le déplacer de moitié en hauteur et en largeur, comme ceci :

.foo {    position: absolute
    top: 50%;    left: 50%;    marging-top: -150px;    margin-left: -150px;
}

En utilisant la fonction calc(), on passe juste le haut et la gauche attributs Le même effet peut être obtenu :

.foo {    position: absolute
    top: calc(50% - 150px);    left: calc(50% - 150px);
}

Avec l'intervention de Flexbox, cette méthode est rarement nécessaire. Cependant, il existe certaines situations dans lesquelles Flexbox ne peut pas être utilisé. Par exemple, cette méthode est utile si l'élément doit être positionné de manière absolue ou fixe.

Exemple 2 - Création de dimensions de raster racine

En utilisant rem, la fonction calc() peut être utilisée pour créer un raster basé sur une fenêtre. Nous pouvons définir la taille de la police de l’élément racine sur une fraction de la largeur de la fenêtre.

html {  
    font-size: calc(100vw / 30);
}

Maintenant, 1rem correspond à 1/30 de la largeur de la fenêtre. Tout texte sur la page sera automatiquement mis à l'échelle en fonction de votre fenêtre d'affichage. De plus, les fenêtres de mêmes proportions afficheront toujours la même quantité de texte, quelles que soient les véritables dimensions de la fenêtre.

Si nous utilisons rem pour définir la taille du non-texte, ils obéissent également à ce comportement. Un élément de 1rem de largeur correspond toujours à 1/30 de la largeur de l'élément viewport.

Exemple 3 - Clarté

Enfin, calc() rend les calculs plus clairs. Si vous avez créé un groupe d'éléments 1/6 de la largeur du conteneur de leur élément parent, vous pourriez écrire :

.foo {    width: 16.666666667%;
}

Cependant, cela peut être plus clair et plus lisible :

.foo {    width: calc(100% / 6);
}

Utilisez calc() , nous pouvons faire plus, comme créer un système de grille. C'est l'une des nouvelles fonctionnalités les plus utiles de CSS.

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!