Cette fois, je vais partager avec vous les compétences d'utilisation de CSS en combat réel. Quelles sont les précautions lors de l'utilisation de CSS en combat réel. Voici des cas pratiques, jetons un coup d'œil.
Pour une animation de découpage, utilisez le chemin du clip au lieu de la largeur/hauteur pour éviter les faibles performances causées par le réarrangement du DOM.
.animate { width: 200px; height: 200px; background: #000; animation: 1s clip; } @keyframes clip { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 100% 0); } }
clip-path peut également être utilisé pour couper d'autres graphiques réguliers/irréguliers
.clip { clip-path: polygon(0 100%, 50% 0, 100% 100%, 0 30%, 100% 30%); /* 多边形 */ clip-path: circle(30px at 35px 35px); /* 圆形 */ clip-path: ellipse(30px 25px at 35px 35px); /* 椭圆 */ }
En plus d'utiliser transform3d pour activer l'accélération GPU , vous pouvez également utiliser will-change pour forcer l'accélération GPU afin d'optimiser les performances de l'animation
.animate { width: 200px; height: 200px; background: #000; animation: 1s clip; will-change: clip-path; } @keyframes clip { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 100% 0); } }
Utiliser la simulation de remplissage, puis utiliser positionnement absolu des éléments enfants
/* 1:1 */ .container { width: 200px; } .container:after { display: block; content: ' '; padding-top: 100%; } /* 16:9 */ .container { width: 200px; } .container:after { display: block; content: ' '; padding-top: calc(100% * 9 / 16); }
Notre méthode couramment utilisée :
affichage : bloc en ligne
haut : 50 % + transformation : translsateY(-50%)
affichage : flex
Les autres incluent padding上下撑高
, display: table
, <a href="http://www.php.cn/wiki/902.html" target="_blank">position<code><a href="http://www.php.cn/wiki/902.html" target="_blank">position</a> + margin: auto
+ marge : auto, 绝对定位 + margin
, etc., c'est une méthode de hack qui n'est pas couramment utilisée et qui ne peut être utilisée que dans des scénarios spéciaux. C'est une méthode de hack avant CSS3. Après CSS3, il n'est pas nécessaire de les utiliser pour obtenir un centrage vertical, donc je n'ai pas réussi. Je n’entre pas dans les détails.
Parmi eux, display: flex
est une huile de serpent. Elle peut être utilisée directement dans la plupart des scénarios, mais il existe encore des scénarios particuliers dans lesquels elle ne peut pas être utilisée :
Initialisation de la structure du projet dans les projets front-end
Bogues rencontrés lors de l'utilisation de la portée des variables js
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!