Was sind die Größeneinheiten von CSS?

Es gibt viele Arten von Größeneinheiten in CSS, und jede Einheit hat ihre anwendbaren Szenarien und Verwendungszwecke. Im Folgenden werden die häufig verwendeten CSS-Größeneinheiten im Detail vorgestellt und entsprechende Codebeispiele bereitgestellt.

1. Pixel (px)
   Pixel sind eine der am häufigsten verwendeten Größeneinheiten. Es wird relativ zu den physischen Pixeln des Bildschirms gemessen und hat eine feste Größe. Beim Schreiben von CSS-Stilen können Sie Pixel direkt als Werte für Attribute wie Breite, Höhe, Rahmen sowie Innen- und Außenränder verwenden. Beispiel:

   div {
     width: 200px;
     height: 100px;
     border: 1px solid #000;
     padding: 10px;
     margin: 20px;
   }

2. Prozent (%)
   Prozent ist eine Maßeinheit relativ zur Größe des übergeordneten Elements. Es kann für Attribute wie Breite, Höhe, innere und äußere Ränder und Ränder verwendet werden. Durch Festlegen des Prozentsatzes können Sie ein responsives Layout erreichen. Beispiel:

   div {
     width: 50%;
     height: 50%;
   }

3. em
   em ist eine Maßeinheit relativ zur Schriftgröße des aktuellen Elements. Wenn die Schriftgröße nicht explizit festgelegt wird, entspricht die Größe in em-Einheiten der Schriftgröße des übergeordneten Elements. Es kann für Attribute wie Breite, Höhe, innere und äußere Ränder und Ränder verwendet werden. Beispiel:

   div {
     width: 2em;
     height: 2em;
     padding: 1em;
     border: 0.5em solid #000;
   }

4. rem
   rem ist eine Maßeinheit relativ zur Schriftgröße des Stammelements (d. h. des HTML-Elements). Es kann für Attribute wie Breite, Höhe, innere und äußere Ränder und Ränder verwendet werden. Eine globale Größensteuerung kann durch Festlegen der Schriftgröße des Stammelements erreicht werden. Zum Beispiel:

   html {
     font-size: 16px; /* 设置根元素的字体大小为16px */
   }
   div {
     width: 20rem;
     height: 10rem;
     padding: 4rem;
     border: 2rem solid #000;
   }

5. vw und vh
   vw ist der Prozentsatz der Breite des Ansichtsfensters und vh ist der Prozentsatz der Höhe des Ansichtsfensters. Sie werden relativ zu den Abmessungen des Browser-Ansichtsfensters gemessen. Sie können für Eigenschaften wie Breite, Höhe usw. verwendet werden. Durch Festlegen von vw und vh kann ein reaktionsfähiges Layout erreicht werden. Zum Beispiel:

   div {
     width: 50vw; /* 视口宽度的50% */
     height: 50vh; /* 视口高度的50% */
   }

Zusammenfassung:
In diesem Artikel werden die häufig verwendeten Größeneinheiten in CSS vorgestellt, darunter Pixel, Prozentsätze, em, rem, vw und vh. Eine sinnvolle Auswahl und Verwendung von Größeneinheiten kann Webseiten anpassungsfähig und reaktionsfähig machen. In der tatsächlichen Entwicklung kann die Auswahl geeigneter Einheiten zur Einstellung entsprechend spezifischer Anforderungen und Szenarien das Layout der Seite flexibler und schöner machen.

Das obige ist der detaillierte Inhalt vonWas sind die Größeneinheiten von CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!