CSS-Höhe und Breite

Die Breite dieses Elements beträgt 100 %.

CSS-Einstellungen für Höhe und Breite

height und width Eigenschaft wird verwendet, um die Höhe und Breite eines Elements zu setzen.

Die height- und width-Eigenschaften enthalten keine Innenabstände, Rahmen oder Außenabstände. Sie setzen die Höhe oder Breite des Bereichs innerhalb des Elements, des Innenabstands, des Rahmens und des Außenabstands.

CSS-Werte für Höhe und Breite

height und width Die Eigenschaft kann folgende Werte setzen:

  • auto - Standard. Der Browser berechnet die Höhe und Breite.
  • length - Definiert die Höhe / Breite mit px, cm usw.
  • % - Definiert die Höhe / Breite als Prozentsatz des Blockinhalts.
  • initial - Setzt die Höhe / Breite auf den Standardwert.
  • inherit - Erbt die Höhe / Breite von ihrem Elternteil.

CSS-Beispiel für Höhe und Breite

Die Höhe dieses Elements beträgt 200 Pixel, die Breite 50％

Beispiel

Stellen Sie die Höhe und Breite eines <div>-Elements ein:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Probieren Sie es selbst aus

Die Höhe dieses Elements beträgt 100 Pixel, die Breite 500 Pixel.

Beispiel

Stellen Sie die Höhe und Breite eines anderen <div>-Elements ein:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Probieren Sie es selbst aus

Hinweis:Denken Sie daran,height und width Eigenschaft enthält keine Innenabstand, Rahmen oder Außenabstand! Sie setzen die Höhe / Breite des Bereichs innerhalb des Elements, des Innenabstands, des Rahmens und des Außenabstands.

max-width einstellen

max-width Eigenschaft wird verwendet, um die maximale Breite eines Elements zu setzen.

man kann die maximale Breite (max-width) mit einer Längenangabe (z.B. px, cm) oder einem Prozentsatz der Breite des Blockinhalts (％) angeben, oder sie auf none (Standardwert) setzen (was bedeutet, dass keine maximale Breite gesetzt ist).

Wenn das Browserfenster schmaler ist als die Breite des Elements (500px), tritt der vorherige Fall ein <div> Probleme. Dann fügt der Browser eine horizontale Scrollleiste zur Seite hinzu.

In diesem Fall verwenden Sie max-width kann die Verarbeitung des Browsers in kleinen Fenstern verbessern.

Tipp:Ziehen Sie das Browserfenster auf eine Breite von weniger als 500px, um den Unterschied zwischen den beiden Div zu sehen!

Die Höhe dieses Elements beträgt 100 Pixel, die maximale Breite 500 Pixel.

Die Höhe dieses Elements beträgt 100 Pixel, die maximale Breite 500 Pixel.

Anmerkung:max-width Der Wert der Eigenschaft wird den Wert der Eigenschaft überschreiben width（Breite）。

Beispiel

Die Höhe dieses <div>-Elements beträgt 100 Pixel, die maximale Breite 500 Pixel:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Probieren Sie es selbst aus

Mehr Beispiele

Höhe und Breite eines Elements einstellen
Dieses Beispiel zeigt, wie man die Höhe und Breite verschiedener Elemente einstellt.
Höhe und Breite eines Bildes mit Prozentsätzen einstellen
Dieses Beispiel zeigt, wie man die Höhe und Breite eines Bildes mit Prozentsätzen einstellt.
Einstellen der minimalen und maximalen Breite eines Elements
Dieses Beispiel zeigt, wie man die minimale und maximale Breite eines Elements mit Pixelwerten einstellt.
Die Mindest- und Maximalhöhe des Elements einstellen
Dieses Beispiel zeigt, wie man die Mindest- und Maximalhöhe eines Elements mit Pixelwerten einstellt.

CSS-Größenattribute einstellen

Eigenschaft Beschreibung
height Die Höhe des Elements einstellen.
max-height Die Maximalhöhe des Elements einstellen.
max-width Die Maximalbreite des Elements einstellen.
min-height Die Mindesthöhe des Elements einstellen.
min-width Die Mindestbreite des Elements einstellen.
width Die Breite des Elements einstellen.