So lösen Sie die Elementbewegung, die durch einen per Hover generierten Rahmen verursacht wird

Vorwort

Manchmal verschiebt sich der Inhalt des Elements, wenn hover Pseudoklasse einem Element einen Rahmen hinzufügt. Obwohl wir box-sizing: border-box festlegen und die Breite und Höhe des Elements angeben, wird der Inhalt immer noch durch den Rahmen eingeengt. Beispielsweise in der folgenden Situation:

<style type="text/css" media="Bildschirm">
    .prüfen {
        Höhe: 30vmin;
        Breite: 30vmin;
        Hintergrund: hellblau;
        Box-Größe: Rahmenbox;
    }
    .test:hover {
        Rand: 5px tief schwarz;
    }
</Stil>
<div Klasse="Test">
    das ist ein Div.
</div> 

Der Grund hierfür liegt auf der Hand. Die Größe unseres Elements hat sich nicht geändert (wenn die Breite und Höhe des Elements nicht festgelegt sind oder box-sizing: border-box verwendet wird, ändert sich die Elementgröße). box-sizing: border-box ist wirksam, aber der Inhalt im Element wurde durch den plötzlich hinzugefügten Rahmen herausgedrückt. Unser Boxmodell besteht aus margin , border , padding und content von außen nach innen, sodass der neu hinzugefügte border content unvermeidlich kleiner komprimieren wird und sich auch die Grenzkoordinaten content ändern, was dazu führt, dass sich der visuelle Inhalt verschiebt. Die Lösung des Problems besteht also darin, sicherzustellen, dass das Hinzufügen des Rahmens die Position content nicht beeinflusst.

Hinzufügen eines Rahmens zu einem Element

Das plötzliche Erscheinen des Rahmens ändert das ursprüngliche Layout und verschiebt den Inhalt. In diesem Fall können wir den Rahmen einfach im vorherigen Layout belassen.

.prüfen {
    Höhe: 30vmin;
    Breite: 30vmin;
    Hintergrund: hellblau;
    Rand: 5px durchgehend transparent;
    Box-Größe: Rahmenbox;
}
.test:hover {
    Rand: 5px tief schwarz;
}

Verwenden von Box-Shadow

Die Verwendung von box-shadow oder outline , die keinen Platz im Box-Modell beanspruchen, ist ebenfalls eine Option.

.test:hover {
    /* Rand: 5px tief schwarz; */
    Box-Schatten: 0 0 0 5px schwarz;
    Umriss: 5px tiefschwarz;
}

Polsterung verwenden

Wir können Platz für border reservieren, indem wir padding Polstergröße ändern.

.prüfen {
    Höhe: 30vmin;
    Breite: 30vmin;
    Hintergrund: hellblau;
    Box-Größe: Rahmenbox;
    Polsterung: 5px;
}
.test:hover {
    Polsterung: 0;
    Rand: 5px tief schwarz;
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.