Comment exprimer les dimensions à l'aide de la propriété calc() en CSS3

Cet article présente principalement comment utiliser l'attribut calc() en CSS3 pour exprimer la taille. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

calc(). L'utilisation de la valeur de taille de l'expression de calcul

Lorsque nous voulons implémenter une mise en page adaptative de la page, cela est généralement gênant en raison de l'existence d'une marge, parfois lorsque nous voulons implémenter une zone de saisie avec une largeur adaptative ; également à cause de l'existence de padding ou margin , ce qui est assez fastidieux, et 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 "+", "-", "*" et "/"
2. , em, rem, etc. ;
3. Différentes unités peuvent être mélangées pour le calcul.

Utilisation
La syntaxe de calc() est très simple, tout comme lorsque nous avons appris l'addition (+), la soustraction (-), la multiplication (*) et la division (/) quand nous étions enfants, utilisons Représenté par des expressions mathématiques :

.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 : Position sur la page L'élément block sur contient 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 : Redimensionner automatiquement le formulaire et l'adapter 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>

C'est tout pour cet article L'intégralité du contenu, 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 :

À propos de l'animation CSS3 pour obtenir un effet d'animation image par image

Comment utiliser la boîte CSS3 -reflect Créer un effet de réflexion

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!