Dieses Mal werde ich mit Ihnen die Fähigkeiten zur Verwendung von CSS im tatsächlichen Kampf teilen. Was sind die Vorsichtsmaßnahmen, wenn Sie CSS im tatsächlichen Kampf verwenden?
Verwenden Sie für Clipping-Animationen Clip-Pfad anstelle von Breite/Höhe, um Leistungseinbußen durch DOM-Neuanordnung zu vermeiden.
.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 kann auch zum Ausschneiden anderer regulärer/unregelmäßiger Grafiken verwendet werden
.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); /* 椭圆 */
}Zusätzlich zur Verwendung von transform3d zur Aktivierung der GPU-Beschleunigung können Sie dies auch tun Verwenden Sie Will-Change Forces GPU-Beschleunigung, um die Animationsleistung zu optimieren
.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);
}
}Verwenden Sie die Auffüllsimulation und verwenden Sie dann die absolute Positionierung untergeordneter Elemente
/* 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);
}Unsere häufig verwendete Methode:
Anzeige: Inline-Block
oben: 50 % + Transformation : translsateY( -50%)
display: flex
Der Rest umfasst 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 + margin: auto, 绝对定位 + margin usw. Diese sind ungewöhnlich und können nur verwendet werden In speziellen Szenarien können Hack-Methoden vor CSS3 verwendet werden. Nach CSS3 müssen Sie diese nicht verwenden, um eine vertikale Zentrierung zu erreichen, daher werde ich nicht auf Details eingehen.
Darunter ist display: flex ein Schlangenöl. Es kann in den meisten Szenarien direkt verwendet werden, es gibt jedoch immer noch einige spezielle Szenarien, in denen es nicht verwendet werden kann:
Unterelemente erfordern aus Kompatibilitätsgründen eine Textkürzung. Für Android-Browser der Version 4. Layout
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben Achten Sie auf andere verwandte Artikel auf der chinesischen PHP-Website!
Fehler bei der Verwendung des js-Variablenbereichs
Das obige ist der detaillierte Inhalt vonWir geben Tipps zur Verwendung von CSS im tatsächlichen Kampf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
