SS-Tricks, die Ihnen viel Zeit sparen

Die Arbeit mit CSS ist für Back-End-Entwickler immer ein Albtraum. Hier können wir uns gegen diese Front-End-Entwickler verschwören und uns einige CSS-Tricks aneignen, die selbst Front-End-Entwicklern entgehen.

1. Zentriertrick in Flexbox

Beginnen wir mit dem berühmten Problem der Zentrierung von Divs. Hier verwenden wir eine Flexbox. Sie müssen keine absolute Positionierung festlegen oder mit Rändern arbeiten. Gehen Sie wie folgt vor:

  .flex-center-demo {
    display: flex;
    justify-content: center;
    align-items: center;
  }

2. Schnelle automatische Rasterplatzierung

Sie benötigen dies, wenn Sie Navigationsleisten oder Dashboards entwerfen. Wenn Sie eine Sammlung von Gegenständen haben und diese zusammenstellen müssen, verwenden Sie dies.

.auto-grid-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

Es füllt Zeilen automatisch mit Feldern mit einer Mindestbreite von 120 Pixeln.

3. Auswahl für benachbarte Geschwister

Dies ist nützlich, wenn Sie angrenzende Elemente haben, Elemente, die nach einer Überschrift stehen, beispielsweise der Name des Autors unter der Überschrift.

h2 + p {
    font-style: italic;
    color: blue;
  }

Hier ist ein Bild:

4. Nutzen Sie die Pseudoklasse not()

Wenn Sie ein Element entwerfen und ein Element beispielsweise anders entwerfen müssen, verwenden Sie dieses. Hier ist ein Beispiel für eine Sammlung von Boxen. Wenden Sie das CSS an, mit Ausnahme des dritten, das zu einer speziellen Klasse gehört.

.box:not(.special) {
    background-color: #3498db;
    color: #fff;
    margin: 0.5rem;
    padding: 1rem;
    border-radius: 4px;
  }

5. Erstellen Sie CSS-Animationen wie ein Profi

Es ist etwas problematisch, CSS-Animationen gleich beim ersten Mal richtig hinzubekommen. Verwenden Sie diese Schlüsselbilder, um komplexe Animationen in einer einzigen Regel zu vereinfachen, die sich leicht anpassen oder wiederverwenden lässt.

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fade-in-demo {
  animation: fadeIn 3s forwards;
  background-color: #e67e22;
  color: #fff;
  padding: 1rem;
  text-align: center;
  border-radius: 4px;
}

Bonus-Tipp!

Hier ist ein zusätzlicher CSS-Debugging-Trick, den ich immer verwende. Wenn Sie der Meinung sind, dass Sie das CSS durcheinander gebracht haben und keine Ahnung haben, was falsch ist, versuchen Sie, diese Kästchen um jedes Ihrer Elemente zu platzieren. Das war für mich beim Debuggen von CSS sehr nützlich.

/* Debug: Outline every element with a red border */
* {
  outline: 1px solid red !important;
}

Ich hoffe, dass Sie diesen Artikel nützlich finden. Mein Name ist Sreedeep und ich arbeite an einem Tool namens LiveAPI – das Menschen dabei hilft, API-Dokumente effizient mit KI zu generieren.

Das obige ist der detaillierte Inhalt vonSS-Tricks, die Ihnen viel Zeit sparen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!