Maison > interface Web > tutoriel CSS > le corps du texte

Qu'est-ce qu'une 'propriété calculée' en CSS

王林
Libérer: 2020-09-14 11:32:44
avant
2340 Les gens l'ont consulté

Qu'est-ce qu'une 'propriété calculée' en CSS

Tout d'abord, les propriétés calculées dont parlera cet article n'ont rien à voir avec les propriétés calculées de vue.

(Tutoriel recommandé : Tutoriel CSS)

Je pense que vous avez rencontré de tels problèmes lors du développement :

Je conçois des styles et j'utilise principalement la disposition en pourcentage. De cette façon, il n'y aura pas d'écarts particulièrement importants à différentes résolutions, mais cela ne peut éviter de ne pas appliquer d'unités fixes telles que px. Ainsi, lorsque notre élément parent est divisé en deux parties, la tête utilise les pixels px, mais le bas doit partir. toute la taille que faire ? Flexbox peut effectivement le résoudre, mais n’y a-t-il vraiment pas de meilleur moyen ?

Pour un autre exemple, lorsqu'un élément doit être déplacé, par exemple, je dois le centrer, mais lorsque l'élément parent n'est pas positionné de manière relative, il ne peut pas être positionné et centré. % apparaîtra également comme étant la moitié de sa propre largeur. L'écart doit être inversé, ce qui est gênant.

Voici donc une propriété calculée :

calc(percent - pixel)

Exemple 1 :

// 父元素
.box{
    width:100%;
    height:100;
}
// 子元素左边
.boxLeft{
    width:50px;
    height:100%;
}
// 子元素右边
.boxRight{
    width:calc(100% - 50px);
    height:100;
}
Copier après la connexion

Exemple 2 :

// 需要居中的盒子
.box{
    width:500px;
    height:400px;
    margin-left:calc(50% - 250px);
    margin-top:calc(50% - 200px);
}
Copier après la connexion

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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal