Wir geben Tipps zur Verwendung von CSS im tatsächlichen Kampf

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?

Clipping-Animation erstellen

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); /* 椭圆 */
}

Animationsleistung optimieren

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

Erreichen Sie ein Seitenverhältnis

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

vertikal zentriert

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:

1. Unterelemente erfordern aus Kompatibilitätsgründen eine Textkürzung. Für Android-Browser der Version 4. Layout

2. 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!

Empfohlene Lektüre:

Initialisierung der Projektstruktur in Front-End-Projekten

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!