CSS-Funktionen, die Sie kennen sollten

Heute möchte ich mit Ihnen über fünf coole CSS-Funktionen sprechen, die wahrscheinlich Ihre Schreibstile verändern werden. Wenn Sie CSS lernen, werden Ihnen diese Funktionen das Leben erleichtern. Schauen wir sie uns einzeln an, anhand von Beispielen, die zeigen, wie wir Dinge „von Hand“ erledigen würden und wie wir sie mit diesen Tools vereinfachen können.

1. calc(): Berechnungen direkt in Ihrem CSS durchführen?

Haben Sie schon einmal manuell Werte hinzugefügt oder subtrahiert, um die Größe eines Elements anzupassen? Mit calc() können Sie dies direkt in Ihrem Stylesheet tun, ohne dass vorherige Berechnungen erforderlich sind.

Beispiel ohne calc():

.container {
  width: 70%;
  margin: 20px;
}

Beispiel mit calc():

.container {
  width: calc(70% - 20px);
  margin: 20px;
}

Mit calc() können Sie verschiedene Maßeinheiten wie Prozentsätze und Pixel kombinieren, um flexiblere und anpassungsfähigere Designs zu erzielen.

2. repeat(): Vereinfacht die Erstellung von Rastern?

Wenn Sie das Rasterlayout verwenden, haben Sie wahrscheinlich schon einmal wiederholte Spalten oder Zeilen geschrieben. Mit repeat() können Sie redundanten Code vermeiden und die Lesbarkeit verbessern.

Beispiel ohne wiederholen():

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Tres columnas iguales */
}

Beispiel mit repeat():

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Lo mismo, pero más limpio */
}

repeat() ist ideal für komplexe Gitter oder Gitter mit einem definierten Muster

3. min(): Steuert die maximale dynamische Größe?

min() ermöglicht es Ihnen, die kleinste Größe unter mehreren Werten anzugeben, perfekt für responsive Designs.

Beispiel ohne min():

.box {
  width: 50vw; /* Podría ser demasiado grande en pantallas grandes */
}

@media (min-width: 600px) {
  .box {
    width: 300px; /* Tamaño fijo en pantallas más grandes */
  }
}

Beispiel mit min():

.box {
  width: min(50vw, 300px); /* Escoge automáticamente el valor más pequeño */
}

Mit min() reduzieren Sie Medienabfrageregeln und erreichen ein flüssigeres Design.

4. clamp(): Volle Größenkontrolle in responsiven Layouts

clamp() ermöglicht es Ihnen, einen Bereich von minimalen und maximalen Größen zu definieren, ideal für Schriftarten und Elemente, die entsprechend der Bildschirmgröße skaliert werden müssen.

Beispiel ohne clamp():

.text {
  font-size: 16px; /* Tamaño fijo */
}

@media (min-width: 600px) {
  .text {
    font-size: 20px;
  }
}

@media (min-width: 1200px) {
  .text {
    font-size: 24px;
  }
}

Beispiel mit clamp():

.text {
  font-size: clamp(16px, 2vw, 24px); /* Escala entre 16px y 24px */
}

Mit clamp() eliminieren Sie mehrere Medienabfrageregeln und erhalten ein viel flexibleres Layout.

5. fit-content(): Passt die Breite an den Inhalt an

fit-content() ermöglicht es Ihnen, die Breite eines Elements an die Größe seines Inhalts anzupassen, ohne dass es sich jedoch über einen von Ihnen definierten Maximalwert hinaus ausdehnt. Dies ist sehr nützlich, um Schaltflächen oder Elemente zu erstellen, die sich dynamisch an den darin enthaltenen Text anpassen, aber auf breiten Bildschirmen nicht übermäßig groß werden.

Beispiel ohne fit-content():

.button {
  width: auto; /* Se expande según el contenido */
  padding: 10px 20px;
  border: 1px solid black;
}

(Wenn in diesem Fall der Schaltflächentext sehr lang ist, wird die Schaltfläche zu lang gestreckt.)

Beispiel mit fit-content():

.container {
  width: 70%;
  margin: 20px;
}

Mit fit-content() passt sich die Schaltfläche der Größe des Textes an, überschreitet jedoch nie die Breite von 200 Pixel. Wenn der Text kürzer ist, wird die Schaltfläche kleiner.

Das obige ist der detaillierte Inhalt vonCSS-Funktionen, die Sie kennen sollten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!