ATOZ CSS Schneller Tipp: Verwenden Sie Schwebe und Höhe

Dieser Artikel ist Teil der ATOZ CSS -Serie. Hier finden Sie andere Einträge in dieser Serie: Die vollständige Serie Zeigen Sie die vollständigen Video- und Textdatensätze von Hover -Effekten an

Willkommen in unserer Atoz CSS -Serie! In dieser Serie werde ich mit Buchstaben im Alphabet beginnen und verschiedene CSS -Werte (und Eigenschaften) erforschen. Wir wissen, dass manchmal Screenshots nicht genug sind, und in diesem Beitrag haben wir Ihnen einen neuen Tipp für die Auswirkungen des Schwebes hinzugefügt.

h steht für schweb- und Höhe

In Bezug auf den Schwebeffekt habe ich bereits viel in das Video über Brief H eingeführt, also werde ich hier nicht in Details eingehen. Sie können jedoch einige coole Animationen auf den Schwebezustand anwenden. Suchen Sie bei Google nach "CSS -Hover -Effekten" und Sie werden viel finden.

Folgendes sind einige Websites mit cleveren Effekten:

• codrops: CSS -Übergangsschwebeffekte
• Design Shack: Paste -Hover -Effekte kopieren
• CSS-Tricks: Pop Hobs

Ich habe kürzlich ein Video für die Codeschule gemacht, alles über eine Bibliothek namens hover.css.

Eine andere CSS H -Eigenschaft (ich habe sie auf dieser Website nicht im Detail beschrieben) ist die Höhe (Höhe).

Das

Höhenattribut wird verwendet, um die Inhaltshöhe des Elements zu definieren. Alle Standardlängeneinheiten (wie PX, EM, REM, %, VW, VH und andere Einheiten) können zur Steuerung der Höhe verwendet werden.

Wenn die Höhe eines Elements nicht explizit eingestellt ist, wird sie als Mindesthöhe berechnet, die alle enthaltenen Elemente entspricht (entsprechend dem Standardwert des Standardwerts).

Es wird im Allgemeinen empfohlen, ausdrücklich die Höhe eines beliebigen Elements ausdrücklich zu vermeiden, da es die Flexibilität des Elements einschränkt - dh es kann nicht wachsen, wenn sich der Inhalt ändert. Dies ist besonders wichtig bei reaktionsschnellen Designs, wenn der Inhalt mit dem ändert die verfügbaren Breite vertikal neu angeordnet werden muss.

Daher neige ich dazu, die Höhe nur auf Elementen mit vordefinierten Größen wie Bildern zu setzen. Ein weiterer Anwendungsfall ist, dass bei Verwendung der absoluten oder festen Positionierung die Höhe (und die Breite) um das Positionierungselement umgeht.

Das folgende Beispiel zeigt das Problem der Festlegung einer festen Höhe.

Beispielcode

anzeigen

Während der erste Satz von Text korrekt aussieht, ist der Stil, sobald der Text kürzer oder länger als der Stil ist, nicht mehr korrekt - das Einschlussfeld erscheint zu groß oder der Text überläuft außerhalb des Box.

Eine Möglichkeit, den Textüberlauf zu beheben, besteht darin, die Überlaufeigenschaft zu verwenden, dies jedoch den Text abschneidet und ihn unleserlich macht.

Dies kann vollständig vermieden werden, wenn die Höhe am Anfang nicht angegeben ist. Wenn ich die Flexibilität des Codes verbessern könnte, ohne etwas zu tun, würde ich mich dafür entscheiden, dies ohne zu zögern!

FAQs über CSS -Hoverhöhen (FAQs)

Wie hoch ist der CSS -Schwebeffekt und wie funktioniert es?

CSS-Hover-Effekt ist eine Pseudoklasse, die Stile anwendet, wenn der Mauszeiger über ein Element schwebt. Es wird häufig verwendet, um interaktive Effekte auf Webseiten zu erzeugen, z. B. das Ändern der Farbe einer Taste, wenn die Maus darüber schwebt. Der Schwebeffekt wird angewendet, indem der Selektor ": Hover" verwendet wird, gefolgt von dem zu ändernden CSS -Attribut. Um beispielsweise die Hintergrundfarbe der Taste in Rot zu ändern, wenn die Maus über sie schwebt, können Sie den folgenden Code verwenden:

<code class="language-css">button:hover {
  background-color: red;
}</code>

Wie kann man die Höhe eines Elements mithilfe von CSS -Hover -Effekt ändern?

Sie können die Höhe eines Elements unter Verwendung des CSS -Schwebeffekts ändern, indem Sie eine neue Höhe in der Schweberegel angeben. Wenn Sie beispielsweise die Höhe erhöhen möchten, wenn Ihre Maus über ein Div -Element schwebt, können Sie den folgenden Code verwenden:

<code class="language-css">div:hover {
  height: 200px;
}</code>

In diesem Beispiel wechselt die Maus, wenn sich die Maus über dem Div übersieht, die Höhe des Divs auf 200px.

Kann ich den CSS -Schwebeffekt mit Medienabfragen verwenden?

Ja, Sie können CSS -Schwebeffekte mit Medienabfragen verwenden, um reaktionsschnelle Schwebeffekte zu erzeugen. Beispielsweise können Sie Medienabfragen verwenden, um Schwebeffekte nur dann anzuwenden, wenn der Bildschirm eine bestimmte Breite hat. Hier ist ein Beispiel:

<code class="language-css">@media (min-width: 600px) {
  div:hover {
    height: 200px;
  }
}</code>

In diesem Beispiel wird der Schwebeffekt nur angewendet, wenn die Bildschirmbreite mindestens 600 PX beträgt.

Kann ich mehrere Eigenschaften mit dem CSS -Hover -Effekt gleichzeitig ändern?

Ja, Sie können mehrere Eigenschaften mit dem CSS -Hover -Effekt gleichzeitig ändern. Zum Beispiel können Sie die Höhe, Breite und Hintergrundfarbe des DIV -Elements ändern, wenn Sie darüber schweben. Hier ist ein Beispiel:

<code class="language-css">div:hover {
  height: 200px;
  width: 200px;
  background-color: red;
}</code>

In diesem Beispiel, wenn sich die Maus über der Div -DIV schwebt, ändert sich die Höhe, Breite und Hintergrundfarbe der DIV.

Kann ich Übergangseffekte unter Verwendung von CSS -Hover -Effekten erstellen?

Ja, Sie können den CSS -Schwebeffekt in Verbindung mit der Übergangseigenschaft verwenden, um einen reibungslosen Übergangseffekt zu erzeugen. Sie können beispielsweise einen Übergangseffekt erzeugen, der die Höhe des DIV -Elements in 2 Sekunden nach und nach verändert, während die Maus über das Div -Element schwebt. Hier ist ein Beispiel:

<code class="language-css">div {
  transition: height 2s;
}

div:hover {
  height: 200px;
}</code>

In diesem Beispiel wechselt die Maus, wenn sich die Maus über dem Div übersieht, die Höhe des Divs in 2 Sekunden allmählich auf 200px.

Bitte beachten Sie, dass ich alle Bildlinks als Platzhalter ersetzt habe, da ich nicht auf das Originalbild zugreifen kann. Bitte ersetzen Sie den Platzhalter durch den tatsächlichen Bildlink. In ähnlicher Weise werden die Orte, an denen Links im Artikel benötigt werden, auch von Platzhaltern ersetzt, bitte ersetzen Sie sie gemäß der tatsächlichen Situation.

Das obige ist der detaillierte Inhalt vonATOZ CSS Schneller Tipp: Verwenden Sie Schwebe und Höhe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!