CSS-Größeneigenschaften beziehen sich auf die Breiten- und Höheneigenschaften von Elementen. Obwohl es sehr einfach ist, ist es eine Fähigkeit, die man beherrschen muss. CSS bietet mehrere Attribute wie „Breite“, „Höhe“, „Max-Breite“, „Min-Breite“, „Max-Höhe“ und „Min-Höhe“ zum Festlegen der Breite und Höhe von Elementen. Diese Elemente sind im Folgenden sehr einfach zu verwenden.
1.Höhe
(1) Legen Sie die Höhe des Elements fest: Höhenattribut
Höhe: Eigenschaft gibt die Höhe eines Elements an.
① Geltungsbereich und Anwendungsgegenstand: Standardinhaltsbereich
Anwendbare Objekte: alle Elemente
nicht ersetzte Inline-Elemente, Tabellenspalten, Spaltengruppen
Anwendungsbereich: Standardmäßig bestimmt dieses Attribut die Höhe des Inhaltsbereichs.
② Ändern Sie den Geltungsbereich:
Wenn box-sizing auf border-box gesetzt ist, bestimmt diese Eigenschaft die Höhe des Randbereichs.
③ Nicht zutreffend
Nicht ersetzte Inline-Elemente: Dieses Attribut wird ignoriert.
Inline-Elemente: Höhe kann nicht festgelegt werden.
④ Attributwertüberschreibung
Die Eigenschaften „min-height“ und „max-height“ überschreiben die Höhe.
(2) Hohes Grammatikniveau
Höhe: auto|length|%|inherit;
Enthält experimentelle Attributwerte: [ <Länge> |
/*Keyword valueKeywordvalue*/height:auto;/*Length value<length>values*/height:120px;height:10em;/*Prozentwert<percentage>value*/height:75%;/*Globaler SchlüsselwortwertGlobalvalues*/ height:inherit;height:initial;height:unset;
2.Breite
(1) Legen Sie die Breite des Elements fest: width-Attribut
① Anwendbarer Bereich
Inhaltsbereich: Standardmäßig wird die Breite des Inhaltsbereichs festgelegt.
Nicht enthalten: Sie können Abstände, Rahmen und Ränder außerhalb des Inhaltsbereichs hinzufügen.
Ändern Sie den anwendbaren Bereich: Wenn box-sizing jedoch auf border-box eingestellt ist, wird die Breite des Randbereichs festgelegt.
② Anwendbare Elemente
Alle Elemente außer den folgenden Elementen
Nicht anwendbare Elemente: nicht ersetzte Inline-Elemente, Tabellenzeilen und Zeilengruppen
Nicht ersetzte Inline-Elemente ignorieren dieses Attribut.
③ Abdeckung
Die Eigenschaften „min-width“ und „max-width“ können die Breite überschreiben.
(2) Syntax der Breite
width: auto |. length|.
Enthält experimentelle Attributwerte: [ <Länge> |.
/*Längenwert<Länge>Werte*/width:300px;width:25em;/*Prozentwert<Prozentwert>Wert*/width:75%;/*Schlüsselwortwert Schlüsselwortwerte*/width:25emborder-box;width:75 % Inhaltsbox ;width:max-content;width:min-content;width:available;width:fit-content;width:auto;/*Globale WerteGlobalvalues*/width:inherit;width:initial;width:unset;
3. maximale Breite und maximale Höhe
Die Attribute max-width und max-height werden verwendet, um die maximale Breite bzw. maximale Höhe des Inhaltsbereichs des Elements festzulegen. Wenn die Eigenschaften max-width und max-height definiert sind, sind die tatsächlichen Werte der Eigenschaften width und height unabhängig vom tatsächlichen Wert kleiner oder gleich den Werten der Eigenschaften max-width und max-height Werte der Breiten- oder Höheneigenschaften. Optionale Werte für die Eigenschaften max-width und max-height sind wie folgt:
Nehmen Sie als Beispiel das Attribut max-width: (Die Eigenschaften des Attributs max-height sind ähnlich)
(1) Wenn der Wert des Attributs „max-width“ kleiner als der Wert des Attributs „width“ ist, wird der Wert des Attributs „width“ auf denselben Wert wie das Attribut „max-width“ neu definiert.
(2) Wenn der Wert des Attributs „max-width“ größer als „width“ ist, wird das Attribut „max-width“ ignoriert.
(3) Wenn der Wert des Attributs „Max-Breite“ kleiner als der Wert „Min-Breite“ ist, wird das Attribut „Max-Breite“ ignoriert.
4.Mindestbreite und Mindesthöhe
Die Attribute „Min-Breite“ und „Min-Höhe“ werden verwendet, um die Mindestbreite und -höhe des Inhaltsbereichs des Elements festzulegen. Wenn die Attribute „Min-Breite“ und „Min-Höhe“ definiert sind, gilt unabhängig vom tatsächlichen Wert des Attributs „Breite“ oder „Höhe“. Die tatsächlichen Werte der Attribute „width“ und „height“ sind größer oder gleich den Werten der Eigenschaften „min-width“ und „min-height“. Optionale Werte für die Eigenschaften „min-width“ und „min-height“ lauten wie folgt:
Nehmen Sie als Beispiel das Attribut „min-width“: (das Attribut „min-height“ weist ähnliche Eigenschaften auf)
(1) Wenn der Wert des Attributs „Min-Breite“ kleiner als die Breite ist, wird das Attribut „Min-Breite“ ignoriert.
(2) Wenn der Wert des Attributs „Mindestbreite“ größer als die Breite ist, wird der Wert des Attributs „Mindestbreite“ auf denselben Wert wie das Attribut „Mindestbreite“ neu definiert.
(3) Wenn der Wert des Attributs „Min-Breite“ größer als der Wert „Max-Breite“ ist, wird das Attribut „Max-Breite“ ignoriert.