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

1. Préface

calc() ressemble à une fonction en javascript, mais en fait elle est utilisée en Css, vous pouvez l'utiliser pour calculer la longueur (largeur ou hauteur) et ajuster automatiquement les valeurs en fonction de différentes tailles d'écran, réalisant ainsi facilement un affichage de disposition adaptatif sur différentes tailles d'écran. Dans les projets, on rencontre souvent des éléments qui doivent être toujours centrés. Bien sûr, la première chose qui vient à l'esprit est d'utiliser margin: 0 auto; mes collègues m'ont dit de le faire, ce n'est que lorsque j'ai étudié calc que j'ai vraiment compris cette nouveauté de CSS3.

2. Comment utiliser

Le paramètre dans calc() est une formule de calcul Grâce à cette formule de calcul, la tâche de calcul de la largeur et de la valeur est confiée à différentes tâches. tailles. Le navigateur permet à la page de tirer des conclusions sur la largeur ou la valeur par elle-même. Ces formules de calcul sont également des opérations d'addition (+) soustraction (-) multiplication (*) division (/).

p{
    width: calc(15px + 15px);//30px
    width: calc(15px - 10px);//5px
    width: calc(15px*2);//30px
    width: calc(15px/3);//5px}

Comme le montre l'exemple ci-dessus, il y a un espace entre la valeur à calculer dans l'opération d'addition ( + ) soustraction ( - ) et l'opérateur , et ces espaces ne peuvent pas être omis, mais les espaces dans les opérations de multiplication (*) et de division (/) peuvent être omis.

L' expression dans calc() peut être calculée en utilisant des unités telles que le pourcentage, px, em, rem, etc., et les unités peuvent être mélangées pour le calcul :

p{
    width: calc(3em + 5px);//53px}

3. Imbrication de calc()

calc() est une fonction, donc la fonction peut prendre en charge l'imbrication et le résultat final peut être calculé à l'aide de différentes formules.

p{
    --widthA: calc(10px + 190px);
    --widthB: calc(var(--widthA) / 2);
    --widthC: calc(var(--widthB) / 2);
    width: var(--widthC);//50px
}

4. Centrage simple

Une fois que calc() peut calculer la largeur, il existe de nombreuses façons d'implémenter l'affichage centré, remplissage Ou marge, mais son principe est le même.

p{
    padding: 0 calc((100% - 1024px)/2);
}

En supposant que le contenu du milieu a une largeur fixe de 1024px, obtenez la largeur du parent ou la largeur de la fenêtre à 100%, puis soustrayez la largeur du contenu. la largeur qui doit être allouée aux côtés gauche et droit du contenu, divisez-les en deux (/2) pour que le contenu d'une largeur de 1024px au milieu soit toujours centré.

5. Compatibilité

La compatibilité de calc() est déjà très élevée, IE9+, FF4.0+, Chrome et Safari6+ prennent déjà en charge l'application calc(), mais. il faut encore ajouter le préfixe pour les différents navigateurs.

div{
    -moz-calc(expression);
    -webkit-calc(expression);
    calc(expression);
　　 //expression为计算公式}

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!