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

Exemple 2 :

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

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!