codestory

Die Anleitung zu CSS max-width und min-width

  1. CSS max-width
  2. CSS min-width

1. CSS max-width

CSS max-width wird benutzt um die größte Breite für ein Element festzulegen. Es verhindert, dass die Breite des Elements einen angegebenen Wert überschreitet.
Achtung: CSS width, min-width, max-width funktionieren nur mit den Elementen Block und Inline-Block.
Das Beispiel mit CSS max-width:
Syntax
/* «length» value */
max-width: 3.5em;

/* «percentage» value */
max-width: 75%;

/* Keyword values */
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/* Global values */
max-width: inherit;
max-width: initial;
max-width: unset;
Die möglichen Werte von CSS max-width:
«length»
Geben Sie einen bestimmten Wert für die maximale Breite an, wie 150px, 30cm,...
«percentage»
Der Prozentwert im Vergleich zu der Breite des übergeordneten Elements.
none
Die Breite des Element ist nicht beschränkt.
max-content, min-content, fit-content, stretch

2. CSS min-width

CSS min-width wird benutzt um die minimale Breite für ein Element festzulegen. Es hindert, dass die Breite des Elements als der angegebenen Wert kleiner ist.
Achtung: CSS width, min-width, max-width funktionieren mit den Elemente Block und Inline-Block.
Syntax
/* «length» value */
min-width: 3.5em;

/* «percentage» value */
min-width: 75%;

/* Keyword values */
min-width: auto;
min-width: max-content;
min-width: min-content;
min-width: fit-content;
min-width: fill-available;

/* Global values */
min-width: inherit;
min-width: initial;
min-width: unset;
Das Beispiel mit CSS min-width:
Die möglichen Werten von CSS min-width:
«length»
Geben Sie einen bestimmten Wert für die minimale Breite an, wie 150px, 30cm,..
«percentage»
Der Prozentwert im Vergleich zu der Breite des übergeordneten Element.
none
Der Browser wird automatisch rechnen und den Wert für min-width auswählen.
max-content, min-content, fit-content, stretch

Anleitungen CSS

Show More

Neueste Artikel

Show More