Description de l'utilisation de la propriété calc() en CSS3 pour exprimer les valeurs de taille dans les calculs

Cet article décrit comment utiliser l'attribut calc() en CSS3 pour exprimer des valeurs de taille​​avec des calculs

L'utilisation de calc() est très intelligente. Vous pouvez lister les formules comme nous le faisons. problèmes mathématiques à l'école. Calculez la longueur, la largeur et d'autres valeurs pour obtenir une mise en page adaptative dans une certaine mesure. Ci-dessous, nous expliquerons comment utiliser l'attribut calc() en CSS3 pour exprimer les valeurs de taille dans les calculs

Lorsque nous voulons implémenter une mise en page adaptative de la page, généralement en raison de l'existence d'une marge, c'est plus gênant ; parfois, lorsque nous voulons implémenter une zone de saisie adaptative en largeur, c'est aussi assez fastidieux en raison de l'existence de remplissage ou marge, et en même temps, l'effet final est incohérent en raison de la compatibilité du navigateur. Le nouvel attribut box-sizing ajouté à CSS3 résout le problème ci-dessus dans une certaine mesure. Dans l'article d'aujourd'hui, nous utiliserons un autre attribut nouvellement ajouté calc() de CSS3 pour implémenter une mise en page adaptative.

calc() est un attribut nouvellement ajouté de CSS3. Il vous permet d'utiliser une expression arithmétique pour exprimer la valeur de longueur, ce qui signifie que vous pouvez l'utiliser pour définir la largeur de p et définir la marge, le remplissage et la bordure. , etc.
Règles de fonctionnement Calc() :
1. Utilisez les quatre opérations arithmétiques "", "-", "*", "/" ;
2. , rem, etc.;
3. Différentes unités peuvent être mélangées pour le calcul.

Utilisation
La syntaxe calc() est très simple, tout comme lorsqu'on apprenait l'addition ( ), la soustraction (-), la multiplication (*), la division (/) quand on étaient des enfants, utilisez une expression mathématique pour représenter :

.haorooms {   
  width: calc(expression);   
}

De cette façon, en utilisant ensemble le remplissage, la marge et le pourcentage, le problème peut être résolu.

Par exemple, notre marge est de 20px. Ensuite, nous pouvons écrire

.haorooms{   
  width: calc(100% - 20px);  //注：减号前后要有空格，否则很可能不生效！！   
}

ou nous pouvons l'utiliser comme ceci :

.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);   
}

Exemple
Exemple 1 : Un élément bloc positionné sur la page, avec des marges

.banner {   
  position:absolute;   
  left: 40px;   
  width: -moz-calc(100% - 80px);   
  width: -webkit-calc(100% - 80px);   
  width: calc(100% - 80px);   
  border: solid black 1px;   
  box-shadow: 1px 2px;   
  background-color: yellow;   
  padding: 6px;   
  text-align: center;   
}

Exemple 2 : Un formulaire qui se redimensionne et s'adapte automatiquement au conteneur

input {   
  padding: 2px;   
  display: block;   
  width: -moz-calc(100% - 1em);   
  width: -webkit-calc(100% - 1em);   
  width: calc(100% - 1em);   
}     

#formbox {   
  width: -moz-calc(100%/6);   
  width: -webkit-calc(100%/6);   
  width: calc(100%/6);   
  border: 1px solid black;   
  padding: 4px;   
}

<form>
  <p id="formbox">
  <label>Type something:</label>
  <input type="text">
  </p>
</form>

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!