CSS3 Gems: la fonction calc ()

Explication détaillée de CSS3 Calc () Fonction: Un outil puissant pour la disposition flexible

Points de base

Les fonctions
• CSS3 calc() permettent le calcul de la longueur, du nombre, de l'angle, du temps de transition / d'animation ou de la fréquence sonore, et prennent en charge le mélange de différents types d'unités. Cette fonctionnalité est particulièrement utile dans les conceptions de mise en page car elle permet des calculs de largeur précis dans les dispositions fluides ou réactives.
• calc() La prise en charge des fonctions du navigateur est actuellement limitée. Internet Explorer 9 et Firefox (préfixé) Support natif, mais WebKit (Chrome et Safari) et Opera ne sont pas encore mis en œuvre. Cependant, des améliorations progressives peuvent être utilisées dans les feuilles de style pour assurer la compatibilité entre différents navigateurs.
Les fonctions
• et min() de max() CSS3 renvoient les valeurs minimales ou maximales de deux valeurs ou plus séparées par des virgules, et sont également utilisées pour contrôler la taille relative de la police, mais ne sont actuellement pris en charge par aucun dernier navigateur.

Il existe de nombreux trésors cachés dans la spécification modulaire de CSS3. Cet article introduira une propriété très utile qui pourrait changer la façon dont vous gérez la conception de la mise en page. Les fonctions CSS3 calc() sont principalement utilisées pour calculer la longueur, le nombre, l'angle, le temps de transition / animation ou la fréquence sonore. Cependant, il vous permet de mélanger les types de mesure - un concept puissant dans CSS. Considérez une disposition de site Web qui contient deux éléments flottants. Vous voulez que ces deux éléments aient des largeurs égales et séparés par une marge horizontale de 60px. Cela semble simple? Pas un problème dans les conceptions de largeur fixe; Mais qu'en est-il des dispositions fluides ou réactives? La largeur de la page ne peut pas être déterminée, donc la plupart des développeurs définiront chaque élément à 45%. Ce n'est que lorsque la page est de 600px, 10% des marges sont de 60 pixes; Heureusement, la nouvelle fonction calc() nous permet de calculer la largeur. Dans ce cas, nous voulons que les deux éléments soient 50% moins 30px, par exemple: calc()

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

Peut-être que vous voulez une marge par rapport à la taille de la police - par exemple 4EM? Pas de problème:

#element1, #element2 {
  width: calc(50% - 2em);
}

ou vous voudrez peut-être ajouter une bordure 2px autour des deux éléments:

#element1, #element2 {
  width: calc(50% - 2em - 4px);
  border: 2px solid #000;
}

Je vous suggère de garder le calcul simple, mais vous pouvez utiliser des formules complexes telles que:

#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

Prise en charge du navigateur

Les fonctions sont des recommandations W3C, alors quel navigateur fournit une prise en charge native? Faux. Au moment de la rédaction du moment de la rédaction, il n'y a que Internet Explorer 9. Firefox le soutient également avec un préfixe; calc(). Il n'est pas implémenté dans WebKit (Chrome et Safari) ou Opera, cependant, c'est très utile et je doute que nous n'ayons pas besoin d'attendre trop longtemps. Heureusement, vous pouvez utiliser des améliorations progressives dans votre feuille de style: -moz-calc()

#element1, #element2 {
  width: 45%; /* 所有浏览器 */
  width: -moz-calc(50% - 30px); /* Firefox 4+ */
  width: calc(50% - 30px); /* IE9+ 和未来的浏览器 */
}

N'oubliez pas que vous devez également ajuster les marges en conséquence, par exemple:

#element2 {
  margin-left: 10%; /* 所有浏览器 */
  margin-left: -moz-calc(60px); /* Firefox 4+ */
  margin-left: calc(60px); /* IE9+ 和未来的浏览器 */
}

CSS3 et min() max()

Si vous aimez calc(), vous aimerez les fonctions min() et max(). Ils acceptent deux valeurs séparées ou plus de virgules et renvoient la valeur minimale ou maximale en conséquence, par exemple:

#element1, #element2 {
  float: left;
  width: calc(50% - 30px);
}

#element2 {
  margin-left: 60px;
}

Ces fonctions seront particulièrement utiles lors de l'utilisation de tailles de police relatives pour s'assurer que le texte ne devient pas trop grand ou trop petit. Malheureusement, min() et max() ne sont actuellement pris en charge dans aucun des derniers navigateurs. Espérons qu'ils apparaîtront bientôt.

(La section des questions fréquemment posées est omise ici, car le contenu de cette partie est très répétitif avec le texte d'origine, la pseudo-originalité est plus difficile et la longueur est plus longue, ce qui n'est pas propice à la maintenance de l'article.)

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!