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“, „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-width“ kleiner als der Wert „min-width“ ist, wird das Attribut „max-width“ 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 „Min-Breite“ größer als die Breite ist, wird der Wert des Attributs „Min-Breite“ auf denselben Wert wie das Attribut „Min-Breite“ neu definiert.
(3) Wenn der Wert des Attributs „Min-Breite“ größer als der Wert „Max-Breite“ ist, wird das Attribut „Max-Breite“ ignoriert.