Die gängigen Einheiten des CSS-Layouts enthüllen: Welche müssen Sie beherrschen?

CSS-Layouteinheit enthüllt: Was müssen Sie wissen?

CSS-Layouteinheiten sind ein integraler Bestandteil des Webdesigns. Sie werden verwendet, um die Größe, den Abstand und die Positionierung von Elementen zu bestimmen. In CSS stehen viele verschiedene Einheiten zur Auswahl, jede mit ihren eigenen Eigenschaften und Verwendungszwecken. In diesem Artikel werden wir einige der am häufigsten verwendeten und wichtigsten CSS-Layouteinheiten entmystifizieren und spezifische Codebeispiele bereitstellen, damit Sie sie besser verstehen und anwenden können.

1. Pixel (px)
   Pixel ist eine der am häufigsten verwendeten Einheiten, sie repräsentiert ein Pixel auf dem Bildschirm. Wenn Sie die Größe eines Elements in CSS festlegen, verwenden Sie normalerweise Pixel als Einheit. Sie können beispielsweise den folgenden Code verwenden, um die Breite eines div-Elements auf 200 Pixel festzulegen:

div {
  width: 200px;
}

Pixeleinheiten bestimmen die Größe und Position von Elementen sehr präzise und der Anzeigeeffekt ist auf verschiedenen Geräten nahezu konsistent. Allerdings hat die Verwendung von Pixeleinheiten auch einige Nachteile. Wenn Benutzer Webseiten auf hochauflösenden Bildschirmen durchsuchen, können Pixeleinheiten dazu führen, dass Elemente zu klein erscheinen.

2. Prozent (%)
   Die Prozenteinheit ist relativ zur Größe des übergeordneten Elements. Wenn beispielsweise die Breite eines div-Elements auf 50 % festgelegt ist, beträgt seine Breite die Hälfte der Breite seines übergeordneten Elements. Der folgende Code zeigt, wie Sie die Breite eines Elements mithilfe von Prozenteinheiten festlegen:

div {
  width: 50%;
}

Prozenteinheiten eignen sich hervorragend für responsive Layouts, da sie die Größe von Elementen basierend auf der Bildschirmgröße verschiedener Geräte automatisch ändern können. Allerdings funktionieren Prozenteinheiten möglicherweise nicht richtig, wenn das übergeordnete Element des Elements keine definierte Breite hat.

3. em
   em-Einheiten werden relativ zur Schriftgröße des aktuellen Elements berechnet. Wenn die Schriftgröße eines Elements auf 16 Pixel eingestellt ist, entspricht 1em 16 Pixel. Der folgende Code setzt beispielsweise die Schriftgröße eines Absatzelements auf 1,2em, was dem 1,2-fachen der Schriftgröße des übergeordneten Elements entspricht:

p {
  font-size: 1.2em;
}

em-Einheiten eignen sich hervorragend zum Festlegen der Größe und des Abstands von Elementen, insbesondere beim Entwerfen responsiver Layouts Stunde. Weil die Größe von Elementen basierend auf Änderungen der Schriftgröße automatisch angepasst werden kann. Wenn die Verschachtelungsebene jedoch sehr tief ist, können EM-Einheiten kompliziert und schwer verständlich werden.

4. rem
   rem-Einheiten werden relativ zur Schriftgröße des Stammelements (normalerweise ein HTML-Element) berechnet. Im Gegensatz zu em-Einheiten sind rem-Einheiten nicht von den Verschachtelungsebenen betroffen. Der folgende Code setzt beispielsweise die Schriftgröße eines Titelelements auf 2rem, was dem Zweifachen der Schriftgröße des Stammelements entspricht:

h1 {
  font-size: 2rem;
}

rem-Einheit eignet sich hervorragend für responsive Layouts, da sie automatisch auf Änderungen im reagiert Schriftgröße des Stammelements. Passen Sie die Größe des Elements an. Allerdings ist die Unterstützung in älteren Browsern möglicherweise nicht so gut.

5. vw und vh
   vw und vh sind Einheiten relativ zur Ansichtsfensterbreite und -höhe. 1vw entspricht 1 % der Breite des Ansichtsfensters und 1vh entspricht 1 % der Höhe des Ansichtsfensters. Der folgende Code zeigt, wie Sie die Größe eines Elements mithilfe von vw- und vh-Einheiten festlegen:

div {
  width: 50vw;
  height: 50vh;
}

Die vw- und vh-Einheiten eignen sich hervorragend zum Erstellen responsiver Layouts, da sie die Größe von Elementen automatisch basierend auf der Ansichtsfenstergröße verschiedener Geräte anpassen. Allerdings kann die Verwendung von vw- und vh-Einheiten in manchen Fällen dazu führen, dass Elemente zu groß oder zu klein erscheinen.

Zusammenfassend lässt sich sagen, dass es viele Arten von CSS-Layouteinheiten gibt, jede mit ihren eigenen Eigenschaften und Verwendungszwecken. Bei der Auswahl einer Layouteinheit müssen Sie eine Entscheidung basierend auf der spezifischen Situation treffen. Wenn Sie eine genaue Kontrolle über die Größe und Position von Elementen benötigen, können Sie Pixeleinheiten verwenden; wenn Sie ein responsives Layout erreichen möchten, können Sie Prozent-, em-, rem- oder vw/vh-Einheiten verwenden. Durch den flexiblen Einsatz dieser Einheiten können Sie schöne, ansprechende Weblayouts erstellen.

Ich hoffe, dieser Artikel hilft Ihnen, CSS-Layouteinheiten zu verstehen und anzuwenden. Durch Lernen und Übung werden Sie in der Lage sein, CSS-Layouteinheiten flexibler und professioneller zu nutzen, um einzigartige Webseitenlayouts zu erstellen.

Das obige ist der detaillierte Inhalt vonDie gängigen Einheiten des CSS-Layouts enthüllen: Welche müssen Sie beherrschen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!