CSS -Höhe Calc; Vs Höhe oberer 100VH;

Es gibt "NEIN"Hauptunterschied in den Ergebnissen und Ausführung der CSS -Eigenschaften"Höhe: Calc (100VH);" Und "Höhe: 100VH;”. Der einzige Unterschied ist, dass sie auf unterschiedliche Weise geschrieben wurden. Ansonsten die Funktionalität „Höhe: Calc (100VH)“; Angeboten ist die gleiche wie die, die durch die „Höhe: 100VH“ bereitgestellt wird. und umgekehrt.

Lassen Sie uns dies praktisch verstehen, indem Sie beide Eigenschaften einzeln einzeln anwenden.

Wie man "Höhe: 100VH" anwendet; Eigenschaft in HTML?

Lassen Sie uns das anwenden "Höhe: 100VH;Eigenschaft zu einem HTML -Element, indem zuerst ein DIV -Containerelement mit einer ihm zugewiesenen ID erstellt und dann den ID -Selektor hinzugefügt wird, um die Eigenschaft „Höhe: 100VH“ auf ein Div -Container -Element anzuwenden:

Diese DIV hat die Höhe, die Vollbild-/Sichtpunkte abdeckt


Die darin verwendete Eigenschaft ist Höhe: 100 VH;

Im obigen HTML -Code -Snippet:

• A ""Containerelement wird mit dem" hinzugefügt "Ausweis"Als" deklariert "mydiv”.
• Definieren Sie im Div -Containerelement einen Text und geben Sie den Container „“ an.

Jetzt ist es erforderlich, das hinzuzufügen “AusweisSelektor, der sich auf das oben hinzugefügte HTML -Element bezieht:

#mydiv
Grenze: 3px fest schwarz;
Hintergrundfarbe: Powderblue;
Polsterung: 7px;
Breite: 200px;
Text-Align: Mitte;
Höhe: 100VH;

Das CSS -Stilelement hat das "AusweisSelektor mit einigen CSS -Eigenschaften im Inneren:

• Der "Grenze"Eigenschaft schafft eine schwarze Farbe"3px”Grenze für den Div -Behälter.
• Der "Polsterung"Eigenschaft definiert den Raum zwischen der Grenze des Div und dem Inhalt innerhalb der DIV als"7px”.
• Der "BreiteEigenschaft definiert die Breite oder die horizontale Länge des Behälters.
• Der "TextausrichtungDie Eigenschaft richtet den Div -Inhalt (Text im Div) mit der Mitte des Div -Containers aus.
• Der "Höhe: 100VHEigenschaft definiert die Höhe oder die vertikale Länge des Div -Behälters auf "100 Ansichtsfensterhöhe". Dies ist die wichtigste CSS -Eigenschaft, die hier auf das HTML -Element angewendet werden soll.

Infolgedessen wird die Höhe des Elements von oben nach unten definiert und bedeckt den gesamten vertikalen Bereich des Bildschirms:

Wie man „Höhe anwendet: Calc (100VH); Eigenschaft in HTML?

Wenn wir nun das anwenden “Höhe: Calc (100VH)Eigenschaft zu demselben HTML -Code -Snippet wie oben hinzugefügt wie folgt:

Diese DIV hat die Höhe, die Vollbild-/Sichtpunkte abdeckt


Die darin verwendete Eigenschaft ist Höhe: Calc (100VH);

Im CSS -Stilelement wird der einzige Unterschied der des "Höhe”Eigenschaft, die jetzt als" definiert wird "calc (100VH)”. Die Punkte im Inneren "#mydiv”Selektor bezieht sich auf die gleichen Eigenschaften, die im vorherigen Abschnitt angewendet werden:

#mydiv

Höhe: Calc (100VH);
…

Es kann beobachtet werden, dass es im Vergleich zur anderen Eigenschaft (Höhe: 100VH) keinen Unterschied in dem durch diesen Wert erzeugten Ergebnis gibt:

Dies fasst die Funktionalität beider CSS zusammen “Höhe: 100VH" Und "Höhe: Calc (100VH)" Eigenschaften.

Abschluss

Es gibt keinen Unterschied in der Ausführung und den Ergebnissen der “Höhe: 100VH" Und "Höhe: Calc (100VH)”CSS -Eigenschaften. Wenn eine dieser Eigenschaften auf das CSS -Stilelement angewendet wird, bedeckt das HTML -Element den gesamten vertikalen Bereich des Bildschirms gemäß seiner horizontalen Länge. Dieser Artikel erläuterte das Verfahren zur Anwendung der angegebenen Eigenschaftswerte der Höhe.