Eine kurze Erläuterung des CSS-Überlaufmechanismus
|
Warum müssen Sie sich eingehend mit dem CSS-Überlaufmechanismus befassen? Im eigentlichen Entwicklungsprozess kommt es häufig zu einem Inhaltsüberlauf. Wenn Sie diesen Mechanismus nicht im Detail verstehen, werden Sie häufig auf Fragen wie die folgende stoßen: Warum ist dieses Element nicht vom overflow:hidden des Vorgängerelements betroffen? Als welches Element erscheint hier die Bildlaufleiste? Wie entferne ich diese Bildlaufleiste? Wie fügt man einem bestimmten Element eine Bildlauffunktion hinzu? In diesem Artikel besprechen wir die Details des CSS-Überlaufmechanismus basierend auf dem CSS-Standard. Überlauf Ein Überlauf tritt auf, wenn der Inhalt einer Box (Blockcontainerbox) (untergeordnete Elemente, untergeordnete Elemente und andere Nachkommen) die Größe der Box selbst überschreitet. Derzeit bestimmt die CSS-Eigenschaft „overflow“, wie mit Überlauf umgegangen wird. Diese CSS-Eigenschaft ist jedem bekannt, deshalb werde ich hier nicht näher darauf eingehen. Hier sind einige Punkte, die beachtet werden müssen: Overflow beeinflusst das Abschneiden und Scrollen des gesamten Inhalts des Elements, es gibt jedoch eine Ausnahme: „Es beeinflusst das Abschneiden des gesamten Inhalts des Elements mit Ausnahme aller untergeordneten Elemente (und deren jeweiligen Inhalt und Unterelemente), deren enthaltener Block das Ansichtsfenster oder ein Vorgänger des Elements ist.“ Mit anderen Worten: Das Element, in dem sich Overflow befindet, muss der direkte oder indirekte enthaltene Block des Inhaltselements sein, dann beeinflusst die Overflow-Eigenschaft dieses Inhaltselement. Beispiel: <A><B><C><C/><B/><A/>. Im Allgemeinen wirkt sich der Überlauf von B auf C aus. Wenn C jedoch relativ zum Ansichtsfenster oder zu A positioniert ist (z. B. mithilfe von position:absolute), wird die Anzeige von C nicht durch das Zuschneiden oder Scrollen von B beeinflusst. Wenn eine Bildlaufleiste benötigt wird, wird sie zwischen der Umrandung und der Polsterung platziert. Nachdem das übergeordnete Element eine Bildlaufleiste generiert hat, wird die Größe des von ihm generierten enthaltenden Blocks reduziert, um Platz für die Bildlaufleiste zu schaffen. Die Overflow-Eigenschaft von <html> und <body> taucht auf: „Benutzeroberflächen müssen die für das Stammelement festgelegte ‚Overflow‘-Eigenschaft auf das Ansichtsfenster anwenden. Wenn das Stammelement ein HTML-Element „HTML“ oder ein XHTML-Element „html“ ist und dieses Element ein HTML-Element „BODY“ oder ein XHTML-Element „body“ als untergeordnetes Element hat, müssen Benutzeragenten stattdessen die ‚Overflow‘-Eigenschaft vom ersten derartigen untergeordneten Element auf das Ansichtsfenster anwenden, wenn der Wert des Stammelements ‚sichtbar‘ ist. Der ‚sichtbare‘ Wert muss bei Verwendung für das Ansichtsfenster als ‚auto‘ interpretiert werden. Das Element, von dem der Wert weitergegeben wird, muss einen verwendeten Wert für ‚Overflow‘ von ‚sichtbar‘ haben.“ Man kann daraus schließen, dass: Im Allgemeinen können nur Elemente Bildlaufleisten haben (genauer gesagt können nur Elemente, die Blockcontainer-Boxen generieren, Bildlaufleisten haben). Eine Ausnahme stellt das visuelle Ansichtsfenster dar. Obwohl es kein Element ist, kann es auch Bildlaufleisten haben. Wenn das Overflow-Attribut für <html> und <body> nicht festgelegt ist und der Standardwert „visible“ verwendet wird (dies ist in den meisten Szenarien der Fall), erfolgt der Überlauf des visuellen Ansichtsfensters automatisch: Wenn der Inhalt der Webseite das visuelle Ansichtsfenster überschreitet, wird im visuellen Ansichtsfenster eine Bildlaufleiste angezeigt. Der abschließende Überlauf von <html> ist immer sichtbar. Das heißt, das <html>-Element darf niemals Bildlaufleisten haben. Wenn Sie einen nicht sichtbaren Überlauf für <body> festlegen möchten, müssen Sie zuerst einen nicht sichtbaren Wert für <html> auf „Blase“ festlegen, damit der Überlauf von <body> nicht aufgeblasen wird. Kleine Übung Kleine Übung: Nach dem obigen Prinzip verfügen sowohl das visuelle Ansichtsfenster als auch <body> über horizontale und vertikale Bildlaufleisten, also insgesamt 4 Bildlaufleisten. Sie können overflow: scroll nicht verwenden (das wäre zu einfach). Schritt:
Code + Kommentare:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, benutzerskalierbar=nein">
<title>Prüfung</title>
<Stil>
* {
Polsterung: 0;
Rand: 0;
Box-Größe: Rahmenbox;
}
html {
/* Stellen Sie das HTML immer auf die gleiche Größe wie das visuelle Ansichtsfenster ein (auch wenn Sie das Browserfenster vergrößern oder seine Größe ändern), sodass der Hauptteil auf eine Größe eingestellt werden kann, die größer als das visuelle Ansichtsfenster (110 %) ist.
Für Elemente, die standardmäßig blockiert sind, kann width: 100% weggelassen werden; */
Breite: 100 %;
Höhe: 100%;
/* Der nicht sichtbare Wert wird in das visuelle Ansichtsfenster verschoben, sodass das visuelle Ansichtsfenster eine Bildlaufleiste haben kann*/
Überlauf: automatisch;
Rand: 15px durchgehend rot;
}
Körper {
/* Den Text scrollbar machen*/
Überlauf: automatisch;
/* Der Textkörper läuft über das HTML hinaus und damit auch über den anfänglichen enthaltenden Block und damit über das visuelle Ansichtsfenster, wodurch eine Bildlaufleiste im visuellen Ansichtsfenster angezeigt wird.
Natürlich können Sie den Überlauf des visuellen Ansichtsfensters auch auf viele andere Arten auslösen, z. B. durch Erhöhen der Größe des HTML-Elements oder durch Erstellen einer Position: absolutes Div im Text */
Breite: 110%;
Höhe: 110%;
Rand: 15px durchgehend grün;
}
hauptsächlich {
/* main lässt den Textkörper überlaufen, sodass im Textkörper eine Bildlaufleiste angezeigt wird*/
Breite: 110%;
Höhe: 110%;
Rand: 15px durchgehend blau;
}
</Stil>
</Kopf>
<Text>
<Haupt>
</main>
</body>
</html>Ergebnis:
Wenn Sie den obigen Code selbst in Chrome öffnen, können Sie deutlicher erkennen, wie es funktioniert. Es ist auch möglich, den anfänglichen umschließenden Block auf absolute Weise zu überlaufen:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1, benutzerskalierbar=nein">
<title>Prüfung</title>
<Stil>
* {
Polsterung: 0;
Rand: 0;
Box-Größe: Rahmenbox;
}
html {
/* Stellen Sie das HTML immer auf die gleiche Größe wie das visuelle Ansichtsfenster ein (auch wenn Sie das Browserfenster vergrößern oder seine Größe ändern), sodass der Hauptteil auf eine Größe eingestellt werden kann, die größer als das visuelle Ansichtsfenster (110 %) ist.
Für Elemente, die standardmäßig blockiert sind, kann width: 100% weggelassen werden; */
Breite: 100 %;
Höhe: 100%;
/* Der nicht sichtbare Wert wird in das visuelle Ansichtsfenster verschoben, sodass das visuelle Ansichtsfenster eine Bildlaufleiste haben kann*/
Überlauf: automatisch;
Rand: 15px durchgehend rot;
}
Körper {
/* Den Text scrollbar machen*/
Überlauf: automatisch;
/* Legen Sie eine Größe für den Textkörper fest, sodass die Hauptgröße größer als der Textkörper (110 %) eingestellt werden kann.
Für Elemente, die standardmäßig blockiert sind, kann width: 100% weggelassen werden; */
Höhe: 100%;
Rand: 15px durchgehend grün;
}
hauptsächlich {
/* main lässt den Textkörper überlaufen, sodass im Textkörper eine Bildlaufleiste angezeigt wird*/
Breite: 110%;
Höhe: 110%;
Rand: 15px durchgehend blau;
}
.abs {
/* Lasse den anfänglichen umschließenden Block absolut überlaufen, wodurch das Ansichtsfenster überläuft */
Position: absolut;
Breite: 100px;
Höhe: 100px;
rechts: -100px;
unten: -100px;
Rand: 15px durchgehend blauviolett;
}
</Stil>
</Kopf>
<Text>
<Haupt>
</main>
<div class="abs"></div>
</body>
</html>Ergebnis:
Wenn Sie den obigen Code selbst in Chrome öffnen, können Sie deutlicher erkennen, wie es funktioniert. Wie kann man erkennen, zu welchem Element eine Bildlaufleiste gehört? Sie können das Element, zu dem die Bildlaufleiste gehört, über Chrome DevTools sehen. Wie bereits erwähnt, befindet sich die Bildlaufleiste zwischen der Grenze und der Polsterung des Elements. Wenn Sie mit Chrome DevTools ein Element auswählen und feststellen, dass sich die Bildlaufleiste direkt innerhalb des hervorgehobenen Bereichs (Rands) befindet, gehört die Bildlaufleiste zum aktuellen Element.
Um zu ermitteln, ob die Bildlaufleiste zum visuellen Ansichtsfenster gehört, scrollen Sie zunächst die rechte und untere Bildlaufleiste jeweils nach unten und rechts (dieser Schritt ist sehr wichtig, er stellt sicher, dass unter der Bildlaufleiste kein Inhalt verborgen ist). Drücken Sie dann
Verweise CSS2.1-Standard 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. |
<<: HTML-Webseite: geordnete Liste ol und ungeordnete Liste ul
>>: Detaillierter Vue-Code zur Implementierung der Shuttle-Box-Funktion
Artikel empfehlen
Beispielcode von Vue + Element UI zur Realisierung der Player-Funktion
Die Anzeige ohne Effektbild ist nur leeres Gerede...
Das WeChat-Applet realisiert den Neun-Quadrat-Rastereffekt
In diesem Artikel wird der spezifische Code für d...
Vue verwendet Canvas, um Kreise zufälliger Größe und ohne Überlappung zu erzeugen
Inhaltsverzeichnis Canvas-bezogene Dokumente Effe...
Unterschiede zwischen diesem Schlüsselwort in NodeJS und Browsern
Vorwort Jeder, der JavaScript gelernt hat, muss s...
Detaillierter Code des Beispiels zum Herunterladen des Docker-Installationspakets von yum und zur Installation auf einem Offline-Computer
1. Verwenden Sie auf einem vernetzten Computer di...
So implementieren Sie eine Multi-Terminal-Bridging-Plattform basierend auf WebSocket in JS
Inhaltsverzeichnis 1. Was zu debuggen ist 2. Funk...
Eine kurze Analyse des Zugriffs auf Windows 10-Hostordner von virtuellen CentOS 8-Maschinen aus
Nach der Installation von VMware Tools ① kann Tex...
Detaillierte Erläuterung der Visualisierungskomponente mit Vue zum Vergleichen der Unterschiede zwischen zwei Datensätzen
Inhaltsverzeichnis brauchen: Wichtige Punkte: Anh...
Vue verwendet die Element-el-upload-Komponente, um auf die Grube zu treten
Inhaltsverzeichnis 1. Grundlegende Verwendung 2. ...
Eine detaillierte Erklärung der subtilen Unterschiede zwischen Readonly und Disabled
Sowohl die Optionen „Nur lesen“ als auch „Deaktivi...
Detaillierte Erklärung zum Problem der CSS-Klassennamen
Die folgenden CSS-Klassennamen, die mit einer Zah...
Lösen Sie das Problem, dass der MySql-Client in Sekunden beendet wird (my.ini nicht gefunden).
Problembeschreibung (Umgebung: Windows 7, MySql 8...
Eine kurze Analyse der Verwendung des HTML-Webpack-Plugins
Wenn Sie zum Starten der Seite das Plugin „html-w...
Zusammenfassung von 11 erstaunlichen Best Practices für die Refaktorierung von JavaScript-Code
Inhaltsverzeichnis 1. Extrahieren von Funktionen ...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27 winx64
In diesem Artikel wird die Installations- und Kon...